tbody设为block后列宽错位需恢复表格行为：thead、tbody设block，tr设table-row且width:100%，th/td设table-cell，table设table-layout:fixed和width:100%。
tbody设为display: block后列宽错位怎么办
直接设 tbody { display: block } 会导致内部 tr、td 默认变成 display: block，彻底脱离表格渲染流，列宽不再和 thead 对齐——这是最常卡住人的第一步。
必须显式恢复表格行为：
thead, tbody { display: block }tr { display: table-row; width: 100% }th, td { display: table-cell }-
table { table-layout: fixed; width: 100% }（否则列宽由内容撑开，无法对齐）
缺任何一条，thead 和 tbody 的列都会错开，尤其在动态内容或中英文混排时更明显。
滚动条出现后表头被挤偏怎么修
当 tbody 滚动时，浏览器会加一个垂直滚动条（通常约 17px），它会占用容器宽度，导致 tbody 实际可用宽度变小，而 thead 还按满宽渲染，视觉上就右移了。
解决方法不是隐藏滚动条（影响可访问性），而是补偿：
- 给
thead加padding-right: 17px（或用calc(100% + 17px)配合overflow: hidden容器） - 或者统一把
table包在div里，设div { overflow-y: auto; width: 100%; padding-right: 17px }，再让table宽度为calc(100% - 17px)
不处理这点，哪怕样式全对，上线后第一眼就会觉得“表格没对齐”，但查半天找不到原因。
IE8及更老浏览器能不能用这个方案
不能。IE8 支持 display: block，但不支持对 tbody、tr 等原生表格元素设置该值并保持语义布局——它会忽略，或强行重排成单行块，所有 td 堆在一起。
如果你必须兼容 IE8：
- 放弃
display: block方案，改用 JS 控制：把thead提取到外部div，tbody单独滚动，手动同步列宽（监听resize和load） - 或直接用 polyfill 库如
tablescroll（已停更但代码轻量） - 现代项目建议明确声明不支持 IE8，避免为极低占比用户增加维护负担
为什么不用 position: sticky 固定表头
position: sticky 看起来更“标准”，但它依赖最近的滚动祖先容器。在标准 table > thead + tbody 结构中，tbody 自身不是滚动容器，thead 的 sticky 行为根本不会触发；若强行给 tbody 设 overflow，又会破坏表格语义和打印样式。
所以实际能稳定生效的只有两种路径：
- 用
display: block手动拆解表格渲染流（适合静态/简单表格） - 用 JS 表格库（如
ag-Grid、react-table）接管整个渲染（适合排序、筛选、虚拟滚动等复杂交互）
想靠一行 thead { position: sticky; top: 0 } 就搞定？在真实业务表格里基本不可行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
