table width: 100% 不生效主因是父容器无明确宽度或 display 不撑满；需确保父级有可计算宽度，配合 table-layout: fixed、字体 clamp 缩放、容器查询等协同调整内容密度与可读性。
table width: 100% 不生效？检查父容器是否设了固定宽
直接写 table { width: 100% } 却没反应，大概率是父容器（比如 div）没给明确宽度，或者用了 display: inline-block 这类默认不撑满的显示模式。浏览器不知道“100%”是相对于谁的。
必须确保父级有可计算的宽度：
- 父
div显式设置width: 100%或max-width: 800px等具体值 - 若父级是 flex 容器，子
div要加flex: 1才能占满可用空间 - 避免父级用了
position: absolute且没设left/right，否则宽度退化为内容宽度
文字和单元格被压缩看不清？别只调 width
光让表格变窄，td 里的文字可能换行、挤在一起或字体太小——这不是缩放，是塌陷。真正“跟随缩放”需要同步控制内容密度：
- 用
font-size: clamp(0.8rem, 2.5vw, 1.2rem)让字体随视口等比变化 -
td, th { padding: 0.5rem; }比固定10px更适应不同尺寸 - 加
table { table-layout: fixed; }，再给每列设width（如col:nth-child(1) { width: 20%; }），防止内容撑开列宽 - 慎用
white-space: nowrap——它会让长文本溢出，不是缩放，是隐藏
transform: scale() 看起来缩了，但实际布局错乱？
transform: scale(0.8) 是纯视觉缩放，元素在文档流中仍占原始空间，容易导致重叠、滚动条异常、点击区域错位。
立即学习“前端免费学习笔记（深入）”；
只在以下场景安全使用：
- 表格被包裹在带
overflow: hidden的容器里，且不需要交互（如只读报表） - 配合
transform-origin: top left防止整体偏移 - 同时设置容器
height并用calc()补偿缩放后高度（例如原高400px，缩放0.8后容器设height: calc(400px * 0.8)） - 移动端慎用：iOS Safari 对
scale()下的 touch 事件坐标处理不稳定
移动端多列表格挤成一团？用 CSS 容器查询更靠谱
媒体查询（@media）只能按视口缩放，但表格实际可用宽度取决于父容器（比如侧边栏展开后的主内容区）。CSS 容器查询能响应父容器尺寸变化：
先给父容器加标记：
<div class="table-container"> <table>...</table> </div>
再用容器查询控制：
@container (width < 600px) {
.table-container table { font-size: 0.85rem; }
.table-container th, .table-container td { padding: 4px 6px; }
}
@container (width >= 600px) {
.table-container table { font-size: 1rem; }
.table-container th, .table-container td { padding: 8px 12px; }
}注意：需在父容器上声明 container-type: inline-size，且当前仅 Chromium 和 Safari 支持较完善——Firefox 仍需前缀。
真正难的不是让表格“看起来小”，而是让内容密度、可读性、交互区域在不同缩放层级下保持一致。多数人卡在只调 width，却忘了 font-size、padding、table-layout 必须协同变化。
