HTML表格行分组标签的使用规范-html教程-PHP中文网

tbody 必须位于 table 内且紧接开始标签后，作为行容器承载 tr；多个 tbody 可逻辑分段，影响样式、脚本及导出行为；其 dom 顺序与渲染位置存在差异，空 tbody 也需保留以维持表格布局稳定性。

html表格行分组标签的使用规范

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

<thead>、<code><tbody>、<code><tfoot> 必须按顺序出现在 <code><table> 内，且不能嵌套在 <code><tr> 或其他行级标签中。它们不是可选的“装饰”，而是浏览器解析表格结构、辅助技术读取、CSS 选择器定位的关键节点。

<h3><strong>为什么必须放在 <code><tr> 外面？
<p>这些分组标签是「行容器」，不是「行内容」。<code><thead> 里放的是 <code><tr>，而不是反过来。常见错误是把 <code><thead> 塞进某个 <code><tr> 里，结果浏览器直接忽略或降级为普通 div —— 样式失效、屏幕阅读器跳过、<code>tbody tr:nth-child(odd)

选择器完全失灵。

<thead> 必须紧接在 <code><table> 开始后（或 <code><caption></caption> 之后），且只能有一个
<tbody> 可以有多个，用于逻辑分段（比如按月份拆分数据块） <li><code><tfoot> 理论上应写在 <code><tbody> 之前（HTML 规范要求），但多数浏览器会自动渲染到表格底部；不过若依赖 JavaScript 动态插入 <code><tfoot>，顺序错会导致 DOM 插入失败 <h3><strong><code><tbody> 多个实例的实际用途 <p>它不只是语义标签，更是样式和脚本控制的锚点。比如导出 Excel 时按 <code><tbody> 切分 sheet，或滚动长表格时只让 <code><tbody> 区域可 overflow-y: scroll，而 <code><thead> 固定不动。 <ul><li>每个 <code><tbody> 可单独加 <code>class，方便 JS 按组操作（如折叠/展开某类数据）
CSS 中 tbody:nth-of-type(2) tr:first-child 能精准选中第二组首行，比用 class 更可靠
注意：<tr> 不能跨 <code><tbody> 边界 —— 一个 <code><tr> 必须完整落在单个 <code><tbody> 内，否则结构非法 <h3><strong><code><tfoot> 渲染位置与 DOM 顺序的矛盾 <p>规范要求 <code><tfoot> 写在 <code><tbody> 之前，但视觉上总在底部。这是因为浏览器会重排渲染流，而非按 DOM 顺序线性绘制。这个机制带来两个实际影响： <ul><li>如果用 <code>display: flex 或 grid 强制改变 <table> 子元素顺序，<code><tfoot> 会脱离预期位置，甚至消失 <li>JS 通过 <code>table.tBodies 获取的是 <tbody> 集合，但 <code>table.tFoot 是单个引用 —— 若页面有多个 <tfoot>，只有第一个被识别 <li>服务端渲染时若误将 <code><tfoot> 放在最后，部分旧版 Safari 可能不渲染其内容真正容易被忽略的，是 <code><thead> 和 <code><tfoot> 的存在本身会触发浏览器对表格布局的重新计算 —— 即使它们为空，也会影响 <code>table-layout: fixed 下列宽的分配逻辑。别以为“没内容就删掉”，留着比删掉更稳。

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