51. 表格样式基础

本节目标：掌握 CSS 美化表格的常用技巧，做出干净清爽的数据表格。

默认的 HTML 表格很难看：没边框、挤在一起、白茫茫一片。

别担心，CSS 几分钟就能让它焕然一新。

边框与合并

给表格加边框很简单，但默认会出现”双边框”现象。

table, th, td {
  border: 1px solid #333;
}

每个单元格都有独立边框，拼在一起就变成了双线条。

解决办法：border-collapse: collapse。

table, th, td {
  border: 1px solid #333;
  border-collapse: collapse;
}

border-collapse 要写在 table 上。它把所有相邻边框合并成一条。

Note

是表格专属属性，不要写在 th 或 td 上。

内边距

单元格内容和边框挤在一起？加 padding 就好了。

th, td {
  padding: 12px 15px;
}

第一个值是上下内边距，第二个是左右内边距。

内容有了呼吸空间，阅读起来舒服很多。

斑马条纹

隔行换色能让长表格更容易阅读。用户不容易看错行。

tr:nth-child(even) {
  background-color: #f2f2f2;
}

偶数行有了浅灰背景，奇数行保持白色，形成斑马条纹效果。

用

就变成从第一行开始条纹。注意奇偶是相对于所有兄弟元素计数。

悬停高亮

鼠标悬停时高亮当前行，提升交互感。

tr:hover {
  background-color: #ddd;
}

用户移到哪一行，哪一行就变色。这在数据密集的表格里特别有用。

表头样式

表头应该和普通数据有明显区分。

th {
  background-color: #4CAF50;
  color: white;
  text-align: left;
}

绿色背景、白色文字、左对齐。表头一眼就能认出来。

圆角与阴影

想让表格更有质感？试试圆角加阴影。

table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

注意：用圆角时 border-collapse 要改回 separate（默认值），否则圆角不生效。

overflow: hidden 确保内部元素不超出圆角范围。

完整示例

把上面所有技巧合在一起：

<!DOCTYPE html>
<html lang="zh">
<head>
<style>
  table {
    border-collapse: collapse;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  th, td {
    border: 1px solid #ddd;
    padding: 12px 15px;
    text-align: left;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  tr:hover {
    background-color: #ddd;
  }
</style>
</head>
<body>
  <table>
    <tr>
      <th>姓名</th>
      <th>城市</th>
      <th>年龄</th>
    </tr>
    <tr><td>张三</td><td>北京</td><td>28</td></tr>
    <tr><td>李四</td><td>上海</td><td>32</td></tr>
    <tr><td>王五</td><td>广州</td><td>25</td></tr>
  </table>
</body>
</html>

复制到浏览器打开，看看效果。一份干净、清爽的数据表格就诞生了。