表格小屏错乱主因是渲染机制与响应式断点未对齐；需用table-layout:fixed+width百分比或colgroup控制列宽，配合min-width、overflow-x:auto及text-overflow截断。
表格列宽在小屏幕下错乱的典型表现
用 width: 100% 或 table-layout: fixed 后，小屏上列宽不按比例收缩、文字溢出、列被强行压缩成一条细线，甚至出现横向滚动条卡在内容外侧——这通常不是 CSS 写错了，而是表格自身渲染机制和响应式断点没对齐。
百分比宽度必须配合 table-layout: fixed 才生效
纯 width: 30% 在 table-layout: auto（默认）下会被浏览器忽略，列宽由内容撑开。只有设为 fixed，百分比才真正控制列宽分配：
table {
table-layout: fixed;
width: 100%;
}
th, td {
width: 25%; /* 四列均分 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}-
table-layout: fixed让浏览器只读第一行（或col元素）来确定列宽，后续行不再影响布局 - 必须给
<table> 显式设 <code>width，否则百分比无参照基准 - 避免在
th/td上同时写min-width或max-width，会和百分比冲突
overflow: hidden 不起作用？检查父容器和 display 类型
常见失效原因：外层容器（如 <div class="table-wrapper">）没设 <code>overflow-x: auto，或表格被套在 display: inline-table 里。正确结构应是：
<div class="table-wrapper"> <table>...</table> </div>
.table-wrapper 样式：
立即学习“前端免费学习笔记（深入）”；
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table {
width: 100%;
min-width: 600px; /* 防止过小屏把列压垮 */
}-
min-width是关键：它保证表格有最低可读宽度，避免小屏下列宽归零 - 不要对
th/td单独设overflow: hidden就以为完事——文字截断需配合white-space: nowrap和text-overflow: ellipsis - 移动端 Safari 对
overflow-x: auto的支持依赖父容器有明确宽度，建议加width: 100%
复杂表头或合并单元格时，colgroup 比百分比更可靠
当有 colspan 或多级表头，百分比列宽容易错位。这时直接用 <colgroup></colgroup> 定义物理列宽：
<table>
<colgroup>
<col span="2" style="width: 40%">
<col style="width: 20%">
<col style="width: 40%">
</colgroup>
<thead>...</thead>
<tbody>...</tbody>
</table>-
<col>的width在table-layout: fixed下优先级高于th/td的width -
span属性能准确映射跨列关系，比手动算百分比更防错 - 注意：IE 会忽略
col上的overflow，所以文字截断仍要写在td上
表格响应式真正的难点不在写法，而在测试时是否覆盖了「窄高」（如 iPhone 竖屏）和「宽矮」（如折叠屏横屏）两种极端比例；min-width 和 colgroup 的组合，往往比纯百分比更能守住底线。
