CSS 在带有滚动条的 div 中使用表格

在本文中，我们将介绍如何使用 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 在带有滚动条的 div 中创建和定制表格。在网页设计中，表格是一种常见的展示数据的方式，而带有滚动条的 div 则提供了一个可以滚动的视窗，在有限的空间内展示大量的数据。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

创建表格

首先，我们需要创建一个 div 并设置其样式为带有滚动条。在 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">HTML 中，我们可以通过设置 div 的宽度和高度，加上 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 属性 overflow: auto; 来实现这一点。接下来，我们在 div 内部创建一个 table 元素。

<div class="scrollable-table">
  <table>
    <!-- 表格内容 -->
  </table>
</div>

在这个例子中，我们给 div 设置了一个类名 scrollable-table，以便于后面添加样式。

定制表格样式

有了基本的结构后，我们可以使用 CSS 来定制表格的样式。首先，我们可以给表格添加一个样式类，例如 .table-style，然后在 CSS 中定义它的样式。

.table-style {
  border-collapse: collapse;
  width: 100%;
}

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

.table-style th {
  background-color: #f2f2f2;
  color: #333;
}

在这个例子中，我们给表格设置了一个边框合并效果（border-collapse: collapse;），并给表头和单元格定义了一些简单的样式，如内边距、文字对齐和底部边框。

填充表格内容

接下来，我们需要在表格中添加数据。大多数情况下，我们可以通过 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">JavaScript 动态地从数据源中获取数据并填充表格。但为了简化示例，我们将使用静态数据填充表格。

<table class="table-style">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>北京</td>
    </tr>
    <!-- 更多数据行 -->
  </tbody>
</table>

在这个例子中，我们在表格的头部定义了表头，然后在表格的 tbody 中添加了数据行。

添加滚动条

现在，让我们给 div 添加滚动条。通过设置 div 的高度和宽度，并添加 overflow: auto; 属性，div 将会出现一个滚动条，以便在有限的空间内展示大量数据。

.scrollable-table {
  height: 300px;
  width: 100%;
  overflow: auto;
}

在这个例子中，我们将 div 的高度设置为 300 像素，宽度设置为 100%，并添加了 overflow: auto; 属性，以便在表格内容超过 div 区域时显示滚动条。

样式调整

最后，我们可以根据需要对表格的样式进行进一步的调整。可以调整字体大小、行高、单元格的宽度等。这里只是给出一个简单的例子。

.table-style th, .table-style td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  line-height: 1.5;
}

.table-style th {
  background-color: #f2f2f2;
  color: #333;
  width: 30%;
}

在这个例子中，我们适当增加了内边距和行高，并将表头单元格的宽度设置为 30%。