表格自适应需同时满足：父容器有明确宽度，且table设置width:100%和table-layout:fixed；列宽用<col>定义最可靠；内容溢出需配合white-space、overflow等控制；边框影响总宽需用box-sizing:border-box。
单纯在 <table> 上写 width="100%" 或 style="width: 100%"，表格几乎不会真正自适应——因为缺了两个硬性前提：父容器必须有可计算宽度，且必须启用 table-layout: fixed。
为什么 width: 100% 常常不生效
浏览器默认按内容撑开 <table>，width: 100% 不是“继承父宽”，而是“以父宽为基准计算”，但若父容器没设宽度（比如一个没写 width 的 <div>），这个百分比就失去参照，退化为 auto；更常见的是漏掉 table-layout: fixed，导致列宽仍由内容动态决定，整表看似宽了，列却乱挤或横向溢出。
- 父容器必须有明确宽度：如
style="width: 100%"、max-width: 768px或固定像素值 -
<table>必须同时声明style="width: 100%; table-layout: fixed;"，缺一不可 - 仅靠
<th>或<td>上的width属性无法触发稳定自适应，它们在auto模式下会被忽略
用 <col> 定义列宽才是稳定做法
<col> 是专为列级控制设计的语义元素，优先级高于单元格上的任何 width 声明，且不依赖首行内容是否渲染完成。写错位置（比如放在 <thead> 里）或单位混用（如 px 和 % 同时出现）都可能导致部分列失效。
-
<col>必须紧接在<table>开始标签后、<thead>前 - 支持
%、px、em，不支持fr（CSS Grid 单位） - 没写
<col>的列，宽度会 fallback 到第一行对应<th>的width，若也没写，就坍缩成最小内容宽 - 示例结构：
<table style="width: 100%; table-layout: fixed;"> <col width="120"> <col width="30%"> <col width="20%"> <thead><tr><th>序号</th><th>名称</th><th>状态</th></tr></thead> </table>
内容溢出必须配对控制 white-space 和 overflow
table-layout: fixed 下，长文本、URL、未换行英文会直接撑破列宽或溢出容器，仅靠 width 无法约束视觉表现。
立即学习“前端免费学习笔记（深入）”；
- 单行截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（<td>默认是table-cell，可直接用） - 自动换行：
word-break: break-word;或overflow-wrap: break-word;，同时确保white-space: normal; - 图片/内联元素撑宽：
img { max-width: 100%; height: auto; }，否则会破坏列宽基准
边框和盒模型会影响总宽度计算
启用 border-collapse: collapse 后，边框会合并，但边框宽度仍计入表格总宽；若列宽加起来是 100%，加上边框就可能超限，导致横向滚动或列压缩。
- 给
<table>加box-sizing: border-box;，让width: 100%包含边框和padding - 用
padding替代部分边框视觉效果，更可控 - 检查是否误用了
margin在<td>上——表格单元格不支持
最容易被忽略的点是：表格自身没写 width: 100%，或者父容器宽度不可计算，哪怕 <col> 写得再准，整个表格还是收缩成内容最小宽度。这不是 CSS 优先级问题，而是渲染逻辑的前提缺失。
