Question

我遇到了一些我想要实现的功能：

我想要一个固定的表格标题，这样我就可以向下滚动，同时在浏览数据时仍能看到标题。
我希望我的桌子尽可能大〜=＆gt;没有溢出-x
我的列可以来自不同的大小，但标题必须对齐。
我的＆lt; td＆gt;必须限制最大高度，并在td内添加一个滚动条。

这些甚至可能吗？因为我尝试了几个不确定的解决方案=（

如果我将表头与表格分开，则会使列标题的宽度变得混乱。

.test {
    overflow-x: visible;
    overflow-y: auto;
}

如果您对overflow-x或overflow-y使用可见，而对另一个使用不可见。可见值被解释为自动。

这些不起作用：

编辑@ Merijn DK：

<!-- html -->
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th ng-repeat="column in columns" ng-show="column.show" ng-style="column.style">
                {{ column.label }}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in results">
            <td ng-repeat="column in columns" ng-show="column.show" ng-style="column.style" ng-bind-html="item.data | unsafe">
            </td>
        </tr>
    </tbody>
</table>

//Javascript
.filter('unsafe', function($sce, $rootScope) {
     return function(html) {
         return $sce.trustAsHtml(html);
     };
 });

Answer 1

刚刚找到了一个很好的插件，允许以各种方式浮动或固定theads。 Just look at the awesome demos here

现在你需要以角度来实现它。我做了一个非常快速和不完美的指令，可以改进很多:(已经由@spades本人改进，THX因为太棒了！）

plunker.directive('thead', function() {
  return {
    restrict: 'A',
    scope: {
      ngModel: '='
    },
    link: function(scope, elem) {
        window.onscroll = function() {
            elem.floatThead({
                scrollingTop: 45,
            });
            elem.floatThead('reflow');
        }
    }
  };
})

您可以在此处添加各种选项以试用它们：

elem.floatThead(additionaloptions);

只需添加你的html指令：

  <table thead>
    <thead>
      <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
        <th>d</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>111</td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
      </tr> ...

找到一个完整的plunker（带窗口滚动示例）here（当然这也可能发生在容器中，只需查看floatThead主页）

请注意，您应该在新窗口中打开预览（右上角的蓝色x）并调整其高度，直到显示滚动条。

Angular + Bootstrap：表格设计

1 个答案: