如何通过调整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，肉眼几乎看不见留白。实操建议：

• 所有 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">，设 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 属性）

记住：美化表格的前提是信息可读，不是视觉上「看起来像设计稿」。