如何通过调整CSS边框间距和背景色提升初级项目表格的美观度？

本文共计717个文字，预计阅读时间需要3分钟。

默认表格的单元格边框是分离的，即使用 `td` 和 `th` 各自的边框。看起来很清晰。如果想将边框变成合并的一条线，必须进行显式的样式设置：

表头和奇偶行背景色怎么配才不刺眼：用 :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，肉眼几乎看不见留白。