我有一个高度固定的面板，overflow-y:auto; 在这个面板中我显示表格，当用户点击其中一行时，行右侧的三 Angular 形出现工作正常，直到滚动条不出现在表格列表中。如果有滚动条，则面板下方会出现右箭头。如何解决这个问题？
这是 Working Fiddle我还在下面添加了完整的代码片段和有问题的图像 
(function() {
'use strict';
angular
.module('app', [])
.controller('TableController', function($log, $scope) {
$scope.tables = [{
"name": "one_table",
"purpose": "test"
},
{
"name": "one_",
"purpose": "test"
}, {
"name": "two_",
"purpose": "test"
}, {
"name": "three_",
"purpose": "test"
}, {
"name": "four_",
"purpose": "test"
}, {
"name": "five_",
"purpose": "test"
}, {
"name": "six_",
"purpose": "test"
}, {
"name": "seven_",
"purpose": "test"
}, {
"name": "eight_",
"purpose": "test"
}, {
"name": "nine_",
"purpose": "test"
}, {
"name": "ten_",
"purpose": "test"
}
];
$scope.tindex = -1;
$scope.rowClicked = function(idx) {
$scope.tindex = idx;
}
});
})();.panel-body {
display: block;
height: 230px;
overflow-x: hidden;
overflow-y: auto;
}
table {
width: 100%;
max-width: 100%;
}
.arrow-left:after {
border-bottom: 20px solid transparent;
border-left: 20px solid #eee;
border-right: 20px solid transparent;
border-top: 20px solid transparent;
clear: both;
content: '';
float: right;
height: 0px;
margin: 1px auto;
position: absolute;
right: 8px;
width: 0px;
}<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<body ng-controller="TableController">
<div class="row col-md-12">
<div class="col-md-4" data-define="tables">
<div class="panel panel-default">
<div class="panel-heading">
<span>Tables</span>
</div>
<div class="panel-body no-padding">
<table class="table table-striped">
<tbody>
<tr ng-repeat="table in tables track by $index" ng-click="rowClicked($index)" ng-class="tindex === $index ? 'arrow-left' : ''">
<td>{{table.name}}</td>
<td>{{table.purpose}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>请帮我找到正确的方法。
另一方面，我们可以使用 angular-custom 指令来实现吗？
最佳答案
伪元素似乎没有正确定位，即使 tr 被赋予了 position: relative
这个问题可以通过向 td 添加伪元素来解决。
<tr ng-repeat="table in tables track by $index" >
<td ng-click="rowClicked($index)" ng-class="tindex === $index ? 'arrow-left' : ''">{{table.name}}</td>
</tr>
并稍微改变 CSS:
table tbody tr td {
position: relative;
}
.arrow-left:after {
border-bottom: 20px solid transparent;
border-left: 20px solid #eee;
border-right: 20px solid transparent;
border-top: 20px solid transparent;
clear: both;
content: '';
float: right;
height: 0px;
margin: 1px auto;
position: absolute;
top: -3px;
right: -18px;
width: 0px;
}
不过，我不确定将点击事件移动到 td 是否适合您。
更新
要使用多个 td，请按如下方式更新 CSS:
table tbody tr td {
position: relative;
}
.arrow-left td:last-of-type:after {
border-bottom: 20px solid transparent;
border-left: 20px solid #eee;
border-right: 20px solid transparent;
border-top: 20px solid transparent;
clear: both;
content: '';
float: right;
height: 0px;
position: absolute;
top: -2px;
right: 0;
width: 0px;
}
关于出现滚动条时，css 伪元素(tr 外的三 Angular 形)位置未对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43046672/