我想创建一个具有固定thead
和tfoot
以及可滚动tbody
的表!
我已经尝试了几种方法,包括CSS和CSS + Javascript,但它们都很弱且不可靠,我可以通过更改演示中的标记轻松地打破它们。
我想要的是一种方法,让表格到的行为像表格,这意味着浏览器将根据内容(在页面加载时,在调整窗口大小的情况下)和在以下情况下自动调整列:
thead > tr > th
)的内容大于列头(tbody > tr > td
)和列尾(tfoot > tr > td
)的内容,则应根据列头的大小调整列的大小tbody > tr > td
)的内容大于列头(thead > tr > th
)的内容且大于列脚的内容(tfoot > tr > td
),则列应根据列主体的大小tfoot > tr > td
)的内容大于列表头的内容(thead > tr > th
)且大于列主体的内容(tbody > tr > td
),则应根据列的脚注的大小调整列的大小
下面的table
应该说明这些场景:
<table>
<thead>
<tr>
<th>Header one *leads the width* (case 1)</th>
<th>Header two</th>
<th>Header three</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer one</td>
<td>Footer two</td>
<td>Footer three *leads the width* (case 3)</td>
</tr>
</tfoot>
</table>
我想要一个干净(尽可能)和可靠的解决方案,将工作在不同的情况下,可能只有CSS,但JavaScript是OK (香草和干净的JavaScript,而不是jQuery插件)。我不关心旧浏览器的支持(如果有它就太好了,或者至少能达成一个可以在旧浏览器上优雅地降级的解决方案,但这是可选的)……如果最终的解决方案如预期的那样工作,我甚至可以接受使用div
代替表节点……那么,在2016年,有了现代浏览器和CSS,这有可能实现吗?!
编辑:
正文应该垂直滚动,并且表可以有任意数量的列
更新:
我想出了这个解决方案:https://codepen.io/daveoncode/pen/LNomBE,但我仍然不是100%满意。主要的问题是我不能为页眉和页脚单元格设置不同的背景。
更新2:
它现在起作用了!
https://stackoverflow.com/questions/37272331
复制相似问题