TABLE标签真正不可省略的是<tr>（行）和<td>（单元格），缺少<tr>会导致<td>被忽略而显示为空白；<tbody>可省略但浏览器会自动补全，<thead>非必需但提升语义与无障碍支持。
TABLE标签必须包含哪些基础结构
没有<tbody>也能渲染，但浏览器会自动补全；真正不可省略的是<tr>（行）和<td>（单元格）。缺少<tr>会导致<td>直接被忽略——你看到的“空白表格”，大概率是漏写了行标签。
标准骨架如下：
<table>
<thead>
<tr><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody>
<tr><td>张三</td><td>28</td></tr>
<tr><td>李四</td><td>31</td></tr>
</tbody>
</table>
-
<thead>不是必须的，但语义清晰、支持表头冻结和无障碍读取 -
<th>默认加粗居中，适合表头；<td>用于普通数据单元格 - 不要用
colspan或rowspan强行“撑开”缺失的<tr>——结构错乱后CSS定位和JS遍历都会出问题
如何让表格在小屏上不横向溢出
原生<table>默认不响应式，宽度由内容撑开。直接加width: 100%没用，因为<td>会优先按内容宽度伸展。
最稳妥的实操方式是套一层容器并触发滚动：
立即学习“前端免费学习笔记（深入）”；
<div style="overflow-x: auto;"> <table>...</table> </div>
- 仅对
<table>设width: 100%，不设min-width，否则小屏下仍会溢出 - 避免给
<td>设固定width，尤其当内容长度波动大时（如用户昵称），容易截断或撑破布局 - 如果必须隐藏部分列，用
display: none比visibility: hidden更安全——后者仍占表格计算空间
border-collapse: collapse 和 border-spacing 的区别
表格边框默认是“分离模型”（border-spacing生效），两行之间有空隙；设border-collapse: collapse后才真正合并边框，实现经典“单线表格”效果。
关键细节：
-
border-collapse: collapse会让<th>和<td>的border合并，但不会合并<table>自身的border与第一行/最后一行的边框——需额外给<table>加border -
border-spacing只在collapse为separate（默认）时有效，且只能设px单位，不支持em或% - 若用了
outline模拟边框，注意它不参与布局计算，无法替代border
用CSS控制列宽但不破坏语义结构
别用<col>标签硬设宽度——它只影响视觉，JS获取offsetWidth时仍返回内容实际宽度，且在Flex/Grid容器中失效。
推荐做法：
- 给
<th>或<td>加min-width（如min-width: 120px），再配合white-space: nowrap防换行 - 对长文本列，用
max-width: 200px; overflow: hidden; text-overflow: ellipsis;，但必须同时设white-space: nowrap - 避免在
<table>上用table-layout: fixed，除非所有列宽都明确指定——否则内容超长会被裁切，且<th>文字可能被压扁
表格结构本身很简单，难的是在保持语义正确的同时，应对内容长度不确定、屏幕尺寸多变、辅助技术兼容等真实约束。边框、宽度、响应式这些看似基础的点，恰恰最容易在迭代中悄悄坏掉。
