长表格应严格用、、按语义分层：仅含表头行（），承载可增删的数据行（``），放置全表汇总；配合display: block+table-layout: fixed实现表头固定与列对齐，并保障可访问性及打印重复。

用 ``、` ` 和 ` ` 给长表格做结构化分层，核心是**按语义职责切分内容 + 配合 CSS 实现独立控制**，不是加标签就完事，关键在写法和样式协同。

先按逻辑把内容归位

三部分各司其职，不能混放：

• 只放表头行（<tr>），列名用 <code><th>，代表“这一列是什么”； <li><strong><tbody>包住所有数据行，每行用 <code><tr>，单元格用 <code><td>，它是唯一可动态增删的部分； <li><strong><tfoot>放汇总、统计或说明文字，比如“总计：¥24,800”，它语义上属于整张表的结尾，不是某几行的脚注。 <p>注意：HTML 规范允许且推荐把 <code><tfoot> 写在 <code><tbody> 之前——这样浏览器能优先渲染头部和页脚，用户不用等几百行数据加载完才看到表头。 <h3>让表头固定、主体滚动</h3> <p>长表格最常见需求是拖动时表头不动。纯靠 <code>position: sticky 在某些浏览器有兼容问题，更可靠的做法是：
  

  Doc To HTML

  使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

  下载
  • 给 <thead> 保持默认 <code>display: table-header-group；
  • 给 <tbody> 设为 <code>display: block; max-height: 400px; overflow-y: auto;；
  • 同时给 <tbody> tr、<code><td>、<code><th> 显式设 <code>display: table-row 和 display: table-cell，否则列宽会错乱；
  • 配合 table-layout: fixed 和明确的 width 设置，保证列对齐。

  提升可访问性与打印体验

  屏幕阅读器和打印机依赖这个结构识别内容层级：

  • 不写 <thead>，辅助工具可能把第一行数据当标题读； <li>把 <code><tfoot> 放在 <code><tbody> 后面再用 CSS 移动位置，JS 读取 <code>table.tFoot 仍指向原始 DOM 位置，容易出错；
  • 打印长表格时，浏览器会自动在每页顶部重复 <thead>、底部重复 <code><tfoot>，前提是结构正确、没被 CSS 破坏语义。 <h3>多组数据时可嵌套 tbody</h3> <p>一个表格可以有多个 <code><tbody>，适合分组展示（如按月份、部门）： <ul><li>每个 <code><tbody> 可加 <code>class 区分，CSS 单独控制样式；
  • 但 <tfoot> 全局只能有一个，它不属于某个 <code><tbody>，而是整张表的总结； <li>若需每组都有小计，得用额外行放在对应 <code><tbody> 底部，再用 CSS 视觉区分，不能用多个 <code><tfoot>。 </tfoot>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！