优先用 table-layout: auto；默认 fixed 使列宽由首行单元格决定，无法响应屏幕缩放，而 auto 会根据全部内容动态分配宽度，实现自适应，但大数据量时重排性能略低。
表格列宽不随屏幕缩放？优先用 table-layout: auto
默认 table-layout: fixed 会让列宽由第一行 <th> 或 <td> 决定，后续内容超长就溢出或换行，根本不会响应屏幕变化。改成 auto 后，浏览器会根据所有单元格内容自动分配宽度，小屏下自然压缩，大屏下舒展。
但要注意：table-layout: auto 在含大量数据时重排性能略低，不过日常表格（
- 必须移除所有显式设置的
width（如th:nth-child(1) { width: 120px; }），否则会干扰自动计算 -
<col>标签也得删掉，它和fixed强绑定，auto下无效 - 如果某列必须“相对宽”，可用
min-width+max-width限定范围，比如操作列设min-width: 80px; max-width: 120px;
小屏下仍挤成一团？用媒体查询强制堆叠列
纯 auto 在超小屏（比如手机竖屏）可能还是横向滚动，这时就得打破表格结构——把每行变成一个卡片块，用媒体查询切换布局。
核心思路：用 @media (max-width: 480px) 把 <tr> 设为 display: block，再让 <td> 和 <th> 变成 display: block 并加标签前缀，模拟字段名+值的阅读流。
立即学习“前端免费学习笔记（深入）”；
/* 手机端：表格转卡片 */
@media (max-width: 480px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
margin-bottom: 1em;
}
td {
border: none;
position: relative;
padding-left: 50%;
}
}
/* 假设第一列是姓名，第二列是邮箱 */
@media (max-width: 480px) {
td:nth-child(1):before { content: "姓名："; }
td:nth-child(2):before { content: "邮箱："; }
}需要等宽列但又要响应式？别用 width: 25% 硬写死
直接给 th, td { width: 25%; } 看似简单，但实际会因边框、padding、border-box 设置不同导致错位，尤其在 Safari 中容易崩溃。
更稳妥的做法是：用 flex 替代 table 语义（只要不强依赖表格可访问性或 Excel 导出）。
- 外层
<div class="table-flex">，每行用<div class="row">，每列用<div class="cell"> -
.table-flex { display: flex; flex-direction: column; }，.row { display: flex; }，.cell { flex: 1; } - 这样列宽天然均分，且支持
flex-basis按比例分配（如flex: 2;占两份，flex: 1;占一份）
最后检查三件事：边框折叠、文字截断、可访问性
响应式表格最容易忽略的是视觉细节和辅助功能：
-
border-collapse: collapse在table-layout: auto下有时失效，建议统一用border-spacing: 0替代 - 小屏下长文本（如 URL、日志）容易撑破列宽，加
td { word-break: break-word; }或overflow-wrap: break-word; - 如果用了卡片式堆叠，记得保留
<table>的语义结构（比如用role="table"等 ARIA 属性），否则读屏器会丢失行列关系
真正难的不是怎么写，而是想清楚：这表格到底要不要保持原生 <table> 语义？要的话，媒体查询堆叠是兜底方案；不要的话，flex 或 grid 更可控，也少踩坑。
