CSS 表格

HTML 的 <table> 元素是显示结构化数据的理想选择。CSS 提供了一系列属性来控制表格的外观，使其更具可读性和吸引力。

border

为表格添加边框是最基本也是最重要的样式化步骤。你可以为 table, th (表头单元格), 和 td (数据单元格) 添加边框。

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

默认情况下，表格边框是分离的，每个单元格都有自己的边框，这会导致双线边框的外观。

border-collapse

border-collapse 属性用于控制表格的边框是合并还是分离。

• collapse: 将相邻的边框合并成一个单一的边框。这是最常用的设置，能让表格看起来更整洁。
• separate: (默认) 边框是分离的。

table {
  border-collapse: collapse;
  width: 100%; /* 让表格宽度充满其容器 */
}

th, td {
  border: 1px solid #ddd;
  padding: 8px; /* 添加内边距，让内容呼吸 */
}

text-align 和 vertical-align

• text-align 控制单元格内内容的水平对齐方式 (left, right, center)。
• vertical-align 控制单元格内内容的垂直对齐方式 (top, middle, bottom)。

默认情况下，<th> 的内容是居中和粗体的，而 <td> 的内容是左对齐的。

th {
  text-align: left;
  background-color: #f2f2f2;
}

td {
  vertical-align: middle;
}

padding

为 th 和 td 添加 padding (内边距) 非常重要，它可以防止内容紧贴着边框，大大提高可读性。

th, td {
  padding: 15px;
}

斑马条纹 (Zebra Stripes)

为表格行添加交替的背景颜色（即“斑马条纹”）可以帮助用户更容易地水平追踪数据。这可以通过 :nth-child() 伪类来实现。

• :nth-child(even): 选择偶数行的 <tr> 元素。
• :nth-child(odd): 选择奇数行的 <tr> 元素。

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

悬停高亮 (Hover Highlight)

当鼠标悬停在某一行上时改变其背景颜色，可以为用户提供清晰的视觉反馈。

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

响应式表格

在小屏幕设备上，宽表格可能会溢出屏幕，导致水平滚动条，用户体验不佳。

一个简单的响应式解决方案是将表格容器设置为 overflow-x: auto。这样，只有表格本身可以水平滚动，而不会破坏整个页面的布局。

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

通过组合运用这些 CSS 属性，你可以将一个原始的 HTML 表格变成一个清晰、美观且易于使用的数据展示工具。