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

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>
HTML

设置表格的样式

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

table {
  width: 100%;
}
CSS

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

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

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

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

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

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

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

在这个例子中,我们将表格主体的高度设置为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>
HTML

总结

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

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册