table布局失效需先检查display和border-collapse；border-collapse仅对table生效且需配合border；vertical-align需显式声明以统一对齐；响应式用overflow-x: auto加min-width。
table 布局失效？先检查 display 和 border-collapse
现代 CSS 中，table 元素默认是 display: table，但一旦被父容器设为 display: flex 或 display: grid，子元素的 table-row/table-cell 行为可能被破坏。更隐蔽的问题来自 border-collapse：它只对 table 元素生效，且必须配合 border 才可见效果。
-
border-collapse: collapse是消除单元格间隙的最直接方式；separate（默认）会保留border-spacing间距 - 若设置了
border-collapse: collapse却没看到边框合并，大概率是th/td没写border，或父table缺少border - 用
empty-cells: hide可隐藏空td的边框和背景，避免视觉断裂
th 和 td 的垂直对齐经常不一致？统一用 vertical-align
th 默认 vertical-align: center，td 默认也是 center，但一旦内容含行内元素、图片或设置了 line-height，实际视觉位置就容易偏移。这不是 bug，而是基线对齐机制在起作用。
- 强制统一：给
th, td显式设置vertical-align: middle或top - 避免混用
vertical-align和padding调整高度——后者更可控、无副作用 - 若需文字底部对齐（如带单位的数值），用
vertical-align: bottom，但注意它会使多行文本底部对齐，而非最后一行基线
让表格响应式不靠 JS：用 overflow-x: auto + min-width
固定列宽表格在小屏上溢出是常态，但用 width: 100% 强制缩放会导致文字挤成一团。真正轻量的方案是允许横向滚动，同时保证最小可读宽度。
- 给
table父容器（如div）加overflow-x: auto和width: 100% - 给
table自身设min-width: 600px（或根据列数估算），防止过窄压缩 - 禁用
table-layout: fixed除非你明确控制每列width；自动布局（auto）更适应内容长度变化 - 移动端慎用
font-size: smaller缩小字体——优先调padding和列宽，保持可点击区域
div.table-container {
overflow-x: auto;
width: 100%;
}
div.table-container table {
min-width: 500px;
border-collapse: collapse;
}
th, td {
padding: 8px 12px;
vertical-align: middle;
border: 1px solid #ddd;
}
表格样式真正难的不是写法，而是判断何时该用语义化 table，何时该换 grid 或 flex 模拟。边框、对齐、响应式三者只要各守一条底线（border-collapse 必配 border、vertical-align 必显式声明、滚动容器必设 min-width），就能避开 90% 的视觉意外。
立即学习“前端免费学习笔记（深入）”；
