CSS 表格样式

数据展示离不开表格。价格表、成绩单、订单列表，表格天生适合结构化数据。默认表格灰扑扑又挤在一起，CSS 能让它整齐清爽。

表格的基本结构

一个标准表格由 table、thead、tbody、tr、th、td 组成。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>城市</th>
      <th>分数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>北京</td>
      <td>92</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>上海</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

th 是表头，默认加粗居中。td 是普通单元格。

合并边框

默认情况下每个单元格有自己的边框，单元格之间会有双线缝隙。用 border-collapse 把它们合并成单线，是表格排版的第一步。

table {
  border-collapse: collapse;
}

collapse 合并边框，separate 是默认的分离状态。绝大多数场景都用 collapse，表格看起来干净利落。

给表格加边框和内边距

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px 14px;
  text-align: left;
}

宽度撑满容器，边框浅灰，单元格留出内边距，表格立刻清爽。表头想居中就单独设 text-align: center。

斑马纹让行更好读

数据多的时候，隔行变色能避免看串行。

tbody tr:nth-child(odd) {
  background: #f8f9fa;
}

nth-child(odd) 选奇数行，even 选偶数行，这是 CSS 伪类 里的典型应用。斑马纹刷完，长表格阅读体验好很多。

表头固定样式

表头颜色加深一点，与数据区区分开。

thead th {
  background: #3498db;
  color: #fff;
  font-weight: bold;
}

深色表头配白色文字，表格有了清晰的视觉层次。

悬停高亮

鼠标移到哪一行就高亮哪一行，方便定位。

tbody tr:hover {
  background: #eaf4fd;
}

和斑马纹搭配时注意顺序，hover 样式写在后面，悬停时才能盖过斑马纹。

常用布局属性

table-layout 控制列宽算法。

table {
  table-layout: fixed;
}

默认 auto 会根据内容自动计算列宽，内容长列就宽。fixed 按第一行决定列宽，之后各行都按这个宽度渲染，性能好而且列宽可控。表格列多、数据量大的时候用 fixed 更稳。

小结

表格样式三板斧，border-collapse: collapse 合并边框，th 和 td 统一设置边框和内边距，:nth-child 做斑马纹。再配上表头加深和悬停高亮，数据表格就专业起来了。