CSS 在HTML中使用100%宽度的表格，使用tbody实现垂直滚动

在本文中，我们将介绍如何使用CSS和HTML创建一个具有100%宽度的表格，并在tbody中实现垂直滚动。

阅读更多：CSS 教程

创建HTML表格

首先，我们需要创建一个HTML表格的基本结构。在

table>元素内部，我们使用

、

和

元素来定义表格的不同部分。在

元素内部，我们将包含所有的表格行。

<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>
    <!-- 添加更多的行 -->
  </tbody>
  <tfoot>
    <tr>
      <td>表尾1</td>
      <td>表尾2</td>
      <td>表尾3</tdd>
    </tr>
  </tfoot>
</table>

设置表格的样式

接下来，我们需要使用CSS来设置表格的样式。首先，我们将设置表格的宽度为100%以使其充满父容器。

table {
  width: 100%;
}

然后，我们将设置表格的边框和边距。

table {
  border-collapse: collapse;
  border: 1px solid #ddd;
  margin: 10px 0;
}

接下来，我们将设置表头和表尾的背景颜色和文本样式。

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

tfoot {
  background-color: #f2f2f2;
  font-weight: bold;
}

最后，我们将设置表格主体的高度，并启用垂直滚动。

tbody {
  height: 200px;
  overflow-y: auto;
}

在这个例子中，我们将表格主体的高度设置为200px，并启用了垂直滚动。当表格超出200px的高度时，垂直滚动条将自动出现。

完整的HTML和CSS代码示例

下面是一个完整的HTML和CSS代码示例，演示了如何创建一个具有100%宽度和垂直滚动的表格：

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid #ddd;
      margin: 10px 0;
    }

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

    tfoot {
      background-color: #f2f2f2;
      font-weight: bold;
    }

    tbody {
      height: 200px;
      overflow-y: auto;
    }
  </style>
</head>
<body>
  <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>
      <!-- 添加更多的行 -->
    </tbody>
    <tfoot>
      <tr>
        <td>表尾1</td>
        <td>表尾2</td>
        <td>表尾3</tdd>
      </tr>
    </tfoot>
  </table>
</body>
</html>

总结

通过使用CSS和HTML，我们可以创建一个具有100%宽度的表格，并在tbody中实现垂直滚动。我们使用CSS属性来设置表格的样式，包括宽度、边框、边距和背景颜色。通过设置tbody的高度和overflow属性，我们实现了垂直滚动。这样，即使表格的内容过多，也可以保持页面的整洁和易读性。通过掌握这些技巧，我们能够更好地设计和构建具有复杂数据的表格。