tbody 必须显式书写，浏览器虽自动补全但影响 JS 操作、CSS 匹配、SSR 校验及可访问性；thead/tfoot 必须在 tbody 前，否则 DOM 重排导致样式与逻辑错乱；固定表头需谨慎设置 tbody overflow 与 display。
tbody 必须存在，但浏览器会自动补全
HTML 规范要求 <table> 的直接子元素中，<tbody> 是必需的语义容器（即使没写，浏览器也会在 DOM 中自动插入）。这意味着你写：
<table> <tr><td>A</td></tr> </table>
实际解析后，<tr> 会被包裹进一个隐式的 <tbody>。所以手动写 <tbody> 不是“可选优化”，而是显式控制结构的起点——尤其当你要用 JS 操作行、设置样式或做虚拟滚动时，缺了它反而容易出错。
- JS 查询
table.tBodies时，没显式写<tbody>也可能返回空集合（某些旧环境或严格解析模式） - CSS 选择器如
tbody tr:hover在没闭合<tbody>时可能不生效（因 DOM 中虽有隐式节点，但 CSS 无法匹配未声明的标签） - 服务端渲染或 SSR 框架（如 Next.js）若依赖 HTML 结构校验，缺失
<tbody>可能触发警告
thead 和 tfoot 的顺序不能乱，且 tfoot 必须在 tbody 前
<thead> 和 <tfoot> 在源码中必须出现在 <tbody> 之前，否则浏览器会重排 DOM：把 <tfoot> 移到 <tbody> 后面——这会导致 CSS 定位失效、JS 获取顺序错乱，甚至打印样式异常（@media print 依赖正确结构）。
正确顺序：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
<table> <thead><tr><th>Name</th></tr></thead> <tfoot><tr><td>Total: 12</td></tr></tfoot> <tbody><tr><td>Alice</td></tr></tbody> </table>
-
<tfoot>放在<tbody>后面？浏览器会把它“揪”到前面去，但 JS 读取table.tFoot仍指向原位置，DOM 树和 JS API 返回值可能不一致 - 多
<tbody>场景下（比如分组表格），<tfoot>只能有一个，且只作用于整个表，不是每个<tbody>独立配一个 - 可访问性（a11y）工具依赖该顺序识别表头/表尾，错位会导致屏幕阅读器读错汇总行
固定表头时，tbody 需要独立滚动，但 overflow 有陷阱
实现「表头固定、内容滚动」最可靠方式是给 <tbody> 设置 display: block + max-height + overflow-y: auto，同时让 <thead> 保持 display: table-header-group。但这里有两个硬坑：
-
<tbody>设为block后，内部<tr>默认变成display: block，列宽不再对齐<thead>—— 必须给<tr>、<td>、<th>显式设display: table-row / table-cell，并配合table-layout: fixed - Chrome/Firefox 对
<tbody>的overflow支持不一致：Firefox 要求父<table>也设position: relative才能正确裁剪 - 如果表格用了
colspan或动态列宽，table-layout: fixed会让宽度计算失效，此时得用 JS 测量<thead>列宽再同步过去
服务器渲染或框架中，tbody 内容异步加载需防闪烁与结构断裂
React/Vue 中常见做法是先渲染空 <tbody>，再用请求结果填充 <tr>。但若初始 <tbody> 为空，部分浏览器会移除它（尤其 Safari），导致后续 appendChild 失败或样式丢失。
- 始终保留一个空
<tr>或<tr><td colspan="3"> </td></tr>在<tbody>里，防止被 DOM 删除 - 服务端返回的 HTML 片段若只含
<tr>，前端 JS 插入时不能直接innerHTML = rows到<tbody>—— 应用insertAdjacentHTML('beforeend', ...)或创建 DocumentFragment - 使用
<template>标签预存行结构时，注意<template>内部的<tr>不会被浏览器解析为表格行，需手动content.cloneNode(true)并 append
大型表格真正的麻烦不在结构本身，而在结构稳定之后如何让内容进来时不破坏它——空 tbody、错序 tfoot、滚动时的 display 重置，都是 DOM 层面的“静默故障”，不出错则已，一出就是定位困难的样式或交互断裂。
