table元素只能直接包含caption、colgroup、thead、tbody、tfoot和tr子元素；其他元素会被浏览器移出或塞入隐式tbody，导致dom结构错乱，css选择器table>div无效，tr必须嵌套在table/thead/tbody/tfoot内。
table 元素只能直接包含哪些子元素
浏览器对 table 的 DOM 结构有硬性校验：table 的直接子元素只允许是 caption、colgroup、thead、tbody、tfoot 和 tr。任何其他标签（比如 div、p 或另一个 table）直接写在 table 开始标签后，都会被浏览器自动“踢出”到 table 外部，或塞进隐式生成的 tbody 里，导致结构错乱。
常见错误现象：
-
<table> <div>xxx</div> <tr><td>A</td></tr> </table>中的div会跑到table上方 - 用 JS 查询
table.children时发现数量不对，或类型不是预期的HTMLTableRowElement - CSS 写
table > div完全不生效
tr 必须嵌套在 table / thead / tbody / tfoot 内部
tr 不是独立容器，它没有语义上的“行组”能力，必须依附于表格结构上下文。单独把 tr 放在 body 里，或者包在 div 里，浏览器会把它提升到最近的合法父容器（通常是隐式 tbody），甚至可能拆散成多个 tr 节点。
正确层级链只有一条：
table → （可选 thead/tbody/tfoot） → tr → td 或 th
容易踩的坑：
- 误以为
tr可以当“布局行”用，拿它替代flex或grid行容器 - 动态插入
tr时没指定父节点是tbody，而是直接 append 到table，结果被重排到顶部 - 用
innerHTML = '<tr><td>x</td></tr>'更新tbody时，若字符串开头有空格或换行，部分旧版浏览器会忽略首tr
嵌套表格只能放在 td 或 th 里
这是唯一合法入口。因为 tr 只接受 td 和 th 作为子元素，而 td 和 th 允许包含任意流内容 —— 包括另一个完整的 table。
错误写法示例：
<tr><table><tr><td>子表</td></tr></table></tr>
这会让浏览器把整个子 table 移出 tr，很可能出现在页面最上方。
正确做法：
- 子
table必须完整写在某个td或th标签内部 - 如果需要视觉上占满整行，先用
colspan合并该行所有列，再往合并后的单元格里放子表 - 给子表加类名（如
class="nested"），避免样式穿透或冲突
tbody 不是可选的，但浏览器会自动补全
即使你写的 HTML 里只有 <table><tr><td>1</td></tr></table>，浏览器解析后 DOM 中也会出现一个隐式 tbody。这意味着：
- JS 操作时，
table.children[0]很可能是tbody，而不是你写的tr - 用 CSS 选中
table tr是安全的，但table > tr永远匹配不到 —— 因为tr永远不在table直接子级 - 服务端渲染或 SSR 场景下，若依赖显式
tbody做逻辑判断（比如统计行数），需注意它可能被省略
真正容易被忽略的是：当你用 document.createElement('tr') 并试图 appendChild 到 table 时，它不会报错，但实际插入位置由浏览器规则决定 —— 通常进 tbody，但这个 tbody 可能是你没声明过的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
