表格布局不应用于整体页面结构，仅适用于结构化数据或表单对齐；须用确保语义与可访问性，禁用嵌套table，css控制宽度与滚动，统一行高，collapse边框，并在长表中启用虚拟滚动。
表格布局在现代页面中不推荐用于整体页面结构，但若必须展示结构化数据或快速对齐表单控件，优化关键不在“多炫酷”，而在语义正确、可访问、不破屏、不卡顿。
用 <thead>、<code><tbody> 明确划分语义区域
<p>浏览器和屏幕阅读器依赖这些标签理解表格结构。没有 <code><thead> 的长表格，滚动时表头会消失，用户无法判断当前列含义；缺失 <code><tbody> 则可能被解析为单一大行，影响性能与可维护性。
<ul>
<li>必须把所有列标题包在 <code><thead><tr>...</tr></thead> 中，哪怕只有一行
<tbody> 不是可选装饰——它让浏览器能对内容区单独渲染/虚拟滚动（尤其配合 <code>overflow-y: auto 时）
<table>：它会破坏语义层级，导致 JAWS/NVDA 解读混乱
<h3>控制宽度要靠 CSS，别信 <code>width 属性
HTML 属性 width="50%" 或 width="200" 在现代浏览器中行为不可靠：它可能被内容撑开、被父容器截断、在 flex/grid 容器里完全失效。真正可控的是 CSS 的 table-layout: fixed 配合 width 和 min-width。
- 给
<table> 加 <code>style="table-layout: fixed; width: 100%;"，再给每列<th> 或 <code><td> 设 <code>width（如width: 120px或width: 20%） - 想让某列自适应剩余空间？用
width: 1fr不行（<table> 不支持 Grid 语法），改用 <code>width: auto+min-width: 0防止文字溢出 - 移动端横向滚动必须加容器：
<div style="overflow-x: auto"><table>...</table></div>，否则 iOS Safari 会强制缩放或截断 - 必须用
for属性绑定<label for="name">姓名</label>和<input id="name">，这是键盘用户点击聚焦的前提 - 让
<label></label>所在<td> 右对齐：<code>style="text-align: right;"，输入框所在<td> 左对齐 + <code>padding-left: 8px，视觉间距干净 - 禁用
line-height拉伸单元格：统一设td, th { line-height: 1.4; }，避免因字体度量差异导致行高突变 - 一律用
border-collapse: collapse，再通过border控制内外边框 - 去掉所有
cellpadding/cellspacing属性，全用 CSS：td, th { padding: 8px 12px; } - 超过 50 行建议加虚拟滚动：用
position: relative包裹<tbody>，只渲染可视区 3–5 行，其余用空白占位 <p>最容易被忽略的是：表格不是布局工具，哪怕它“看起来很稳”。一旦需求从“展示数据”滑向“响应式切换列数”或“拖拽排序”，立刻换 <code>display: grid或display: flex——不是因为它们更时髦，而是表格的 DOM 结构和渲染机制天生不支持动态重组。
<label></label> 和 <input> 对齐别硬调 vertical-align
表格里放表单时，最常见错误是给 <label></label> 和 <input> 同时加 vertical-align: middle——这看似对齐，实则在不同字体、不同 zoom 级别下仍会偏移，且破坏可访问性基础。
长表格卡顿？先关掉 border-collapse: separate
默认的 border-collapse: separate（即带 cellspacing 效果）会让浏览器为每个单元格单独计算边框盒模型，100 行 × 10 列的表格可能触发重排重绘风暴。真实瓶颈常在这里，而非数据量本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
