表格美化需三步：先用border-collapse: collapse合并边框，再用:nth-child设置柔和背景色，最后调padding和line-height保证内容对齐；窄屏时用滚动容器+隐藏非关键列优先保障可读性。
表格边框太紧、像打印纸怎么办：用 border-collapse 和 border-spacing
默认表格的单元格边框是「分离」的，td 和 th 各自画自己的边框，看起来密不透风。想让边框变成「合并」的一条线，必须显式设置：
table {
border-collapse: collapse;
}否则即使写了 border: 1px solid #ddd，也会看到双线重叠。如果反而想加间隙（比如做卡片式隔断），就改用 border-collapse: separate，再配 border-spacing: 8px 4px（横向 8px，纵向 4px）。注意：border-spacing 只在 separate 模式下生效，且不能用于带 caption 或 border-collapse: collapse 的表格。
表头和奇偶行背景色怎么配才不刺眼：用 :nth-child 和柔和色值
直接给 th 填 #000 或给 tr:nth-child(odd) 填 #f5f5f5 很容易显得灰蒙蒙或割裂。推荐做法：
- • 表头用带灰度的主色，比如
background-color: #4a6fa5（比纯蓝更稳），文字用白；• 偶数行用极浅灰：
tr:nth-child(even) { background-color: #fafafa; }；• 奇数行保持透明或用更淡的色：
tr:nth-child(odd) { background-color: #fff; }；• 鼠标悬停时统一提亮：
tr:hover { background-color: #eef5ff; }（避免用高饱和色）th 加 padding: 12px 16px 和 text-align: left，不然文字贴边会显得拥挤。
内容对不齐、文字挤成一团？重点调 padding 和 line-height
表格难看，八成是因为内边距没设或设得太小。浏览器默认 td 的 padding 是 2px，肉眼几乎看不见留白。实操建议：
- • 所有
td, th 统一设 padding: 10px 14px（上下 10px，左右 14px）；• 如果文字偏多或含图标，把
line-height 提到 1.5 防止行高过紧；• 数字列右对齐：
td.number { text-align: right; padding-right: 20px; }；• 图标+文字组合列，用
white-space: nowrap 防止折行破坏对齐font-size 不调 padding——字体变大但留白不变，只会更压抑。
响应式窄屏下表格崩坏怎么救：优先隐藏非关键列 + 滚动容器
手机上看宽表格，最简单有效的方案不是「重写布局」，而是控制可见性：
- • 给表格包一层
<div class="table-container">，设 <code>overflow-x: auto 和 max-width: 100%；• 对次要列（如「操作」「创建时间」）加类
hide-on-mobile，在媒体查询里设 display: none；• 不要用
font-size: 12px 强缩，小屏下可读性暴跌；• 真要兼容极窄屏，可考虑用
@media (max-width: 480px) 把表格转为 display: block，再用 td:before { content: attr(data-label); } 模拟键值对（需 HTML 加 data-label 属性）记住：美化表格的前提是信息可读，不是视觉上「看起来像设计稿」。
