table-layout: fixed 配合 width: 100% 是实现表格列宽可控的最稳起点，必须同时设置二者，且父容器需有明确宽度；列宽应优先用 <col> 定义，再配合 white-space、word-break 等处理溢出，避免内容撑开列宽。
table-layout: fixed 配合 width: 100% 是最稳的起点
直接设 width: 100% 不够，浏览器默认用 table-layout: auto，一遇到长文本或图片就撑开整列，小屏直接横向溢出。必须加 table-layout: fixed 锁定计算逻辑——它只看第一行 <th> 或 <code><col> 的宽度声明，不等全部内容加载完就渲染，快且可控。
但注意：table-layout: fixed 单独写没用，必须和明确的 width（如 width: 100% 或具体像素值）一起出现，否则浏览器会退回到 auto 模式。
<table> 必须有显式 <code>width，父容器也得有宽度（不能是display: inline或无约束 flex item）- 列宽优先写在
<col>上（放在<thead> 前），比写在 <code><th> 里更可靠 <li>避免混用 <code>min-width/max-width：fixed 模式下它们常被忽略，导致列宽意外坍缩或撑开 - 对可能溢出的文本列，加
word-break: break-all（粗暴但有效）或overflow-wrap: break-word（更尊重单词边界） - 配
max-width: 200px+text-overflow: ellipsis+white-space: nowrap可做截断，但需display: block才生效 - 图片必须加
max-width: 100%和height: auto，否则无视表格列宽约束 - 用
display: grid+grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))把每行变成可换行卡片 - 用
display: flex+flex-wrap: wrap，每个<td> 改成 <code>div并设flex: 1 1 200px - 保留语义的折中法：媒体查询内设
display: blockon<tr>，<code><td> 设 <code>display: block+width: 100%，再用::before伪元素注入表头名美化不是加一堆 border，而是先控节奏
多数人一上来就调颜色、圆角、阴影，结果发现表格更难读了。真正影响可读性的是节奏：行高、留白、对齐、视觉权重。
-
border-collapse: collapse必加，否则双线边框干扰信息密度 -
padding统一设在th和td上，别只设一边；vertical-align: top比 middle 更易扫读 - 交替行背景用
tbody tr:nth-child(even) { background: #f9f9f9 }，别用太艳的色值 - 悬停效果只加
background，别加 transform 或 box-shadow——表格行多时卡顿明显
复杂点在于：table-layout: fixed 下，
<col>宽度单位只能用%、px、em，fr无效；而 Grid/Flex 方案虽然灵活，但丧失了原生<thead> 固定、排序语义、屏幕阅读器支持这些隐性价值。选哪条路，得看数据重要性是否压过交互自由度。</thead> -
让文字不撑列宽的关键是控制换行行为
哪怕用了 table-layout: fixed，如果某列有超长无空格字符串（比如 base64、URL、日志 ID），它仍会把整列拉宽甚至溢出。这时不能只靠 width，得干预文字本身。
white-space: normal 是默认值，允许换行；white-space: nowrap 强制单行——选哪个取决于语义：操作按钮列适合 nowrap，描述列就得 normal。
立即学习“前端免费学习笔记（深入）”；
移动端真要自适应，别硬撑 table
当屏幕宽度小于表格总最小宽度（比如 8 列 × 120px），再怎么调 CSS 都会触发横向滚动或内容挤压。这不是 bug，是 table 的设计本质决定的：它为行列对齐服务，不是为窄屏阅读优化。
这时候强行“响应式”不如换结构。CSS Grid 或 Flexbox 模拟表格外观，能真正按视口重排。
