表格美化需三步：先用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，肉眼几乎看不见留白。实操建议：
