列标题 1 列标题 2 列标题 3 列标题 4 数据 A1 数据 A2 数据 A3 数据 A4 数据 B1 数据 B2 数据 B3 数据 B4 数据 Z1 数据 Z2 数据 Z3 数据 Z4
.table-container { height: 300px; /* 控制整个表格区域的高度 */ overflow-y: auto; /* 让整个容器滚动 */ position: relative; /* 为 sticky 定位提供参考 */}.table-container table { width: 100%; border-collapse: collapse; /* 消除单元格间距 */ table-layout: fixed; /* 帮助固定列宽，避免内容撑开 */}.table-container thead { position: sticky; /* 关键：让表头粘性定位 */ top: 0; /* 粘在容器顶部 */ background-color: #f0f0f0; /* 背景色很重要，防止内容透过 */ z-index: 10; /* 确保表头在滚动内容之上 */}.table-container th,.table-container td { padding: 8px; border: 1px solid #ddd; text-align: left; /* 这里的宽度需要根据实际列数和布局调整 */ width: 25%; /* 假设有4列，每列25% */}/* 如果需要表体单独滚动，则需要更复杂的结构 *//* 另一种思路：让 tbody 独立滚动 *//* .table-container { width: 100%;}.table-container table { width: 100%; border-collapse: collapse; table-layout: fixed;}.table-container thead { display: table; width: 100%; table-layout: fixed;}.table-container tbody { display: block; height: 200px; /* 表体高度 */ overflow-y: auto; width: 100%; /* 保证 tbody 宽度 */}.table-container th,.table-container td { width: 25%; /* 确保 th 和 td 宽度一致 */ padding: 8px; border: 1px solid #ddd; text-align: left;}.table-container tr { display: table; width: 100%; table-layout: fixed;}*/
以上就是HTML表格如何实现固定表头？有哪些实现方案？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1567403.html
微信扫一扫 
支付宝扫一扫 
