CSS表持久性标题

我有一张固定布局的桌子。我添加了一些代码，将thead元素从流中移除（位置：fixed），以便在滚动表格时留在屏幕上

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从流中取出时，表列的其余部分会自行调整大小。有关复制示例，请参见。尝试滚动结果框，查看表列是如何压缩的

有没有办法防止这种情况

---

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

如果删除

表布局：修复，它几乎可以正常工作
您的html代码中有错误。有些标记没有正确关闭，这似乎是JSFIDLE错误。我美化了代码，没有任何问题。不过我已经更新了。你需要固定的标题吗？问题不清楚？当我滚动页面时，我需要标题保持在视口中。问题是，当标题从流中取出时，tbody列正在调整大小，因此标题与列不对齐。必须去掉标题，它应该可以工作。这样地：