【发布时间】：2017-08-20 04:13:55
【问题描述】：
我有一个高度固定的面板，overflow-y:auto; 在此面板中我正在显示表格，当用户单击其中一行时，行右侧的三角形出现，工作正常，直到滚动条没有出现表列表。如果有滚动条，则面板下方会出现右箭头。如何解决这个问题？
这是Working Fiddle，我还在下面添加了完整的代码sn-p和带有问题的图像
(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 指令来完成此任务吗？
【问题讨论】：
-
您需要在此处提供显示问题的标记，而不是明天可能会更改或消失的第三方网站。
-
致关闭请求者；如果题外话，你会解释为什么这个问题？
-
stackoverflow.com/help/mcve 此外，您的 CSS 并不是显示问题的完整标记。除了补充您提供的代码外，不接受指向 jsfiddle 的链接。
-
@Rob 谢谢你的信息；我已经在问题中添加了代码 sn-p。
-
这些第三方网站被用于每 3 个问题，内部代码 sn-p 应该是最小的，但外部链接是供观众使用的，以便他们可以尝试使用该小提琴。