带水平边框的纯 CSS 表格

在前端开发中，表格是一种非常常见的数据展示方式。如果需要让表格更美观、易读，我们可以使用 CSS 编写样式来美化表格。本文将介绍如何使用纯 CSS 来实现带水平边框的表格。

HTML 结构

我们首先需要创建一个 HTML 表格结构，如下所示：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>30</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

这里我们创建了一个简单的表格，有三列用来显示姓名、年龄和性别。

CSS 样式

接下来我们需要使用 CSS 样式来美化表格。首先我们先给整个表格加上样式，去掉默认的边框线条，并添加表格宽度、字体大小、行高等样式：

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 1em;
}

首先，border-collapse 属性用来合并边框，把表格中相邻单元格的边框合并在一起，使表格看起来更简洁。第二个属性 width 设置表格宽度为 100%，使其可以自适应父容器大小。font-size 和 line-height 属性用来控制表格字体大小和行高，保证表格内容更易读。最后，margin-bottom 属性用来添加表格底部的空白间隔，使表格与其他元素更方便地分开。

然后，我们需要为表格中 header 和 body 区域加上不同的样式。thead 和 tbody 分别表示表格结构的 header 和 body 区域。我们可以使用不同的颜色、字体粗细、背景等方式来区分这两部分。这里我们给 header 区域添加另一种颜色的背景和粗体字：

thead {
  background-color: #ddd;
  font-weight: bold;
}

最后，我们加上 td 和 th 的样式，这里的 td 代表 body 区域中的单元格，th 则代表 header 区域中的单元格。我们可以根据需求控制单元格的颜色、边框、填充等样式：

td, th {
  padding: 0.5em;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

这里，padding 属性用来设置单元格内部的填充大小，使内容与边框更美观。text-align 属性用来控制单元格内容的水平对齐方式。border-bottom 属性用来控制单元格底部横线的样式，使表格更易读。

完整样式代码

最终的 CSS 样式如下所示：

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 1em;
}

thead {
  background-color: #ddd;
  font-weight: bold;
}

td, th {
  padding: 0.5em;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

总结

使用纯 CSS 来实现带水平边框的表格十分简单。我们可以通过设置表格的样式来美化表格，并通过不同的样式来区分表格的 header 和 body 区域。有了这些样式，我们可以更方便地展示数据、呈现复杂表格结构，使用户更易读更易懂表格内容。