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