纯 CSS 边框表格

简介

纯 CSS 边框表格是一种使用纯 CSS 实现的简洁、美观的表格样式。它不依赖于任何 JavaScript 库或框架，只需使用 CSS 属性和伪类，即可轻松创建漂亮的表格。

特点

• 使用纯 CSS 实现，避免了对额外库的依赖，减少了网页加载时间。
• 简洁美观，边框线条清晰，使表格内容更易于阅读和理解。
• 可定制性高，适应不同的需求和设计风格。

使用方法

1. 在 HTML 文件中添加以下代码片段：

<style>
/* 添加样式，控制表格及其元素的外观 */
.table {
  border-collapse: collapse;
  width: 100%;
}

.table th, .table td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.table th {
  background-color: #f2f2f2;
}
</style>

<table class="table">
  <thead>
    <tr>
      <th>表头 1</th>
      <th>表头 2</th>
      <th>表头 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据 1</td>
      <td>数据 2</td>
      <td>数据 3</td>
    </tr>
    <tr>
      <td>数据 4</td>
      <td>数据 5</td>
      <td>数据 6</td>
    </tr>
  </tbody>
</table>

2. 将上述代码片段添加到你的 HTML 文件中，即可实现一个基本的纯 CSS 边框表格。你可以根据需要自定义表格的样式，如改变背景色、字体颜色等。

示例效果

将上述代码片段添加到 HTML 文件后，将呈现如下效果：

| 表头 1 | 表头 2 | 表头 3 | | ------ | ------ | ------ | | 数据 1 | 数据 2 | 数据 3 | | 数据 4 | 数据 5 | 数据 6 |

总结

纯 CSS 边框表格是一种方便实现且美观的表格样式。通过使用 CSS 属性和伪类，可以快速创建漂亮的表格，同时避免了对额外库的依赖。你可以根据自己的需求进行定制，使表格更符合你的设计风格。