我在实现几个要实现的功能时遇到了问题:
- 我想要一个固定的表格标题,这样我可以向下滚动,同时在浏览数据时仍然能够看到标题。
- 我希望我的表尽可能大 => 没有 overflow-x
- 我的列可以有不同的大小,但标题必须对齐。
- 我的
必须限制最大高度,并在 td 内添加一个滚动条。 这些甚至可能吗?因为我尝试了几个没有定论的解决方案 =(
如果我将标题与表格分开,它会弄乱列标题的宽度。
.test { overflow-x: visible; overflow-y: auto; }
If you are using visible for either overflow-x or overflow-y and something other than visible for the other. The visible value is interpreted as auto.
这些都行不通:
编辑@ 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); }; });
最佳答案
刚刚找到一个不错的插件,它允许以各种方式 float 或固定广告。 Just look at the awesome demos here
现在你需要用 Angular 来实现它。我做了一个非常快速但不完美的指令,可以改进很多:(@spades 自己已经改进了,感谢他太棒了!)
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)并调整其高度直到出现滚动条。
关于javascript - Angular + Bootstrap : Table designing,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21830541/