我试图用粘性标题和页脚在AngularJS中创建一个表.我已经设法做到了这是一个
Plunker demo和代码：
<body ng-controller="MainCtrl as ctrl">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
Column1
</th>
<th>
Column2
</th>
<th>
Column3
</th>
<th>
Column4
</th>
<th>
Column5
</th>
</tr>
</thead>
<tbody>
<tr class="info" ng-repeat="item in items">
<td>
{{item.name}}
</td>
<td>
{{item.type}}
</td>
<td>
{{item.value}}
</td>
<td>
{{item.code}}
</td>
<td>
{{item.id}}
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>
Column1
</th>
<th>
Column2
</th>
<th>
Column3
</th>
<th>
Column4
</th>
<th>
Column5
</th>
</tr>
</tfoot>
</table>
</body>
但唯一的问题是：
>列宽不是动态的,如您所见,在第一行数据溢出到第二列.
>列不对齐.
任何想法如何解决这个问题？
解决方法
这个问题的成功标准是：
>纯CSS.
>动态尺寸的列.
>粘贴标题和页脚大小与列.
你想要的是不可能的
单元格几乎正确的原因是因为表格是半对的,但文档中实际上有多个表格.覆盖< table>元素显示类型为flex,您已将页面呈现在几个不同的组中. < thead>和< tfoot>是他们自己的桌子,他们的< tbody>是自己的桌子.它们不相互大小,而不是他们自己的组中的其他表格单元格.
有关此主题的其他CSS指南需要固定的宽度. http://joshondesign.com/2015/05/23/csstable
在玩弄之后(具体来说,尝试将thead和tfoot移动到固定位置),我已经决定任何试图给页眉/页脚提供特定规则的尝试打破了表格布局,并且会导致大小调整工作不同,哪些是为什么在细胞上需要固定宽度.即使在这些示例中,它们也以这种方式被打破,但是固定的宽度会使问题无效.
您绝对最简单的修复方法是修复宽度并给它们overflow-x属性.
另一种方法是使用JavaScript.使用JS,所有的投注都是关闭的,你可以做任何你想象的事情.具体来说,您可以使用JS自动调整单元格大小.我记得用一个完成这个的jQuery插件来取得成功.
https://www.datatables.net/
否则,不.我找不到在线的任何示例,你需要它做什么.任何尝试获取此特定布局的工作都是一个黑客,您最好不要使用具有overflow-x单元格和固定宽度的no-JS版本,以及自动调整单元格的启用JS的版本.
