当滚动条出现时,css伪元素(tr外的三角形)位置未对齐

我有一个面板,高度固定,溢出-y：auto;在这个面板中,我正在显示表格,当用户点击其中一行时,行右侧的三角形显示正常工作,直到滚动条未出现在表格列表中.如果有滚动条比右侧arraow出现在面板下方.如何解决这个问题？

这是Working Fiddle,我还在下面添加了完整的代码片段和问题的图像

(function() {

  'use strict';

  angular
    .module('app',[])
    .controller('TableController',function($log,$scope) {
      $scope.tables = [{
          "name": "one_table","purpose": "test"
        },{
          "name": "one_",{
          "name": "two_","purpose": "test"

        },{
          "name": "three_",{
          "name": "four_",{
          "name": "five_",{
          "name": "six_",{
          "name": "seven_",{
          "name": "eight_",{
          "name": "nine_",{
          "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被赋予了一个位置：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;
}

我不确定是否将click事件移动到td是一个解决方案.

jsbin

更新

要使用多个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;
}

jsbin

原文地址：https://www.jb51.cc/css/215051.html

当滚动条出现时,css伪元素(tr外的三角形)位置未对齐

解决方法

相关推荐