我尝试在 AngularJS 中创建一个带有粘性页眉和页脚的表格。我已经成功做到了；这是一个笨蛋演示 https://plnkr.co/edit/NJenZui4atfdbdrjYz5S?p=preview和代码：
<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。
- 动态调整列大小。
- 粘性页眉和页脚的大小与列一致。
你想要的东西是不可能的。
细胞的原因是almost正确的是因为表格是半存在的，但文档中实际上有多个表格。通过重写<table>元素显示类型为flex，您已经在几个不同的组中呈现了页面。这<thead> and <tfoot>是他们自己的桌子，他们的<tbody>是它自己的表。它们之间的大小并不适应彼此，而是适应自己组中的其他表格单元格。
关于此主题的其他 CSS 指南需要固定宽度。http://joshondesign.com/2015/05/23/csstable http://joshondesign.com/2015/05/23/csstable
在尝试了它之后（具体来说，尝试将头部和脚部移动到固定位置），我决定任何为页眉/页脚提供特定规则的尝试都会破坏表格布局并会导致大小调整工作不同，这就是单元格需要固定宽度的原因。即使在示例中，它们也以这种方式被破坏，但固定宽度使问题无效。
你的绝对easiest修复是修复宽度并赋予它们overflow-x属性。
另一种方法是使用 JavaScript。有了 JS，一切皆有可能，您可以做任何您想象的事情。具体来说，您可以使用 JS 自动调整单元格大小。我记得我曾使用 jQuery 插件成功实现了这一目标。
https://www.datatables.net/ https://www.datatables.net/
否则，不行。我在网上找不到任何可以满足您需要的示例。任何让这个特定布局工作的尝试都是一种黑客行为，你最好制作一个带有溢出 x 单元格和固定宽度的无 JS 版本，以及一个自动调整单元格大小的启用 JS 的版本。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
