必须用table、thead、tbody、th、td等语义化标签表达真实表格数据，caption置首，th用于行列头并设scope，跨行列用rowspan/colspan；border-collapse: collapse实现无缝边框；响应式优先重构而非横向滚动；table-layout: fixed需配合width、col及溢出控制。
表格结构必须用语义化标签，不能用 div 模拟
HTML5 不禁止用 div 排表格效果，但真要表达“表格数据”，就必须用 table、thead、tbody、th、td 这套语义标签。否则屏幕阅读器读不出行列关系，SEO 也识别不了数据结构，后续想加排序、导出、响应式适配都会踩坑。
常见错误是把“看起来像表格”的布局（比如三栏介绍）硬套 table，其实该用 flex 或 grid；反过来，把真实的数据表（如价格对比、参数清单）写成 div + float，后期维护和可访问性全崩。
-
caption标签必须放在table最前面，用于说明表格用途，不是可有可无的标题 - 行头用
th，列头也用th，别混用td；多级表头要用scope属性标明作用范围（如scope="col"） - 跨行/跨列必须用
rowspan和colspan，不能靠空单元格或 CSS 隐藏来“凑”
CSS 控制表格样式时，border-collapse 是关键开关
默认浏览器渲染下，table 的边框是分离的（border-collapse: separate），单元格之间有间隙，border-spacing 才生效；设成 collapse 后，相邻边框会合并，此时 border-spacing 失效，但能真正实现“无缝表格”——这是做简洁数据表、带边框的仪表盘表格的基础。
容易忽略的是：一旦用了 collapse，th 和 td 的边框会按优先级叠加（比如 th 设了 2px solid #333，td 是 1px solid #ccc，合并后显示的是 th 的粗边框）。
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #e0e0e0;
padding: 8px 12px;
}
th {
background-color: #f5f5f5;
font-weight: 600;
}响应式表格在小屏上别强行横滚，优先考虑重构显示逻辑
给 table 包一层 div 并加 overflow-x: auto 是最懒的“响应式”，但用户要左右拖拽才能看全，体验极差，而且无法双指缩放。真正可用的方案取决于内容类型：
- 纯数值型表格（如后台列表）：用
@media隐藏次要列，保留 ID、状态、操作等核心字段 - 描述型表格（如产品参数）：用
display: block把每行转成垂直堆叠的卡片，th变成左侧标签，td变成右侧值 - 复杂交互表格：直接换用
grid实现，用data-*属性保留下层数据结构，视觉上模拟表格，行为上更灵活
注意：CSS display: table-cell 等模拟表格的写法，在移动端对齐和断行行为不稳定，尤其遇到长文本或 emoji 时容易错位，不建议用于生产环境。
table-layout: fixed 能控宽但会截断内容，慎用
默认 table-layout: auto 会让浏览器先读完所有内容再计算列宽，大数据量时渲染卡顿；设为 fixed 后，列宽只看第一行（或 col 标签定义），后续行内容超长就可能被截断或撑破容器。
如果真要用 fixed（比如渲染上千行日志表格），必须配合以下措施：
- 给
table显式设width，比如width: 100% - 用
col标签定义各列宽度，例如<col style="width: 20%"> - 对可能超长的
td加white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
另外，fixed 模式下 min-width 和 max-width 在单元格上基本无效，控制宽度得靠 col 或第一行内容。
表格的语义结构比视觉样式重要得多，很多“样式调不好”的问题，根源其实是 thead 漏写了、scope 没设对、或者本就不该用 table。
