CSS 表持久 header

Question

我有一张固定布局的 table 。我添加了一些代码，使 thead 元素脱离流程(位置:固定)，以便在滚动表格时留在屏幕上。

table { table-layout:fixed; width: 100% }
table th { width: 50px }
table th:first-child { width: 20em; }

table td { width: 50px }
table tbody tr:first-child td:first-child { width: 20em;}

问题是，当 thead 从流中取出时，表列的其余部分会自行调整大小。参见 http://jsfiddle.net/2EDQR/3/用于复制示例。尝试滚动结果框并查看表格列是如何压缩的。

关于如何防止这种情况的任何想法？

UPD:当我滚动页面时，我需要标题留在视口(viewport)中。问题是当标题从流程中取出时，tbody 列正在调整大小，因此标题与列不对齐

Answer 1

如果您删除 table-layout:fixed;

，它几乎可以正常工作