可滚动的 tbody

最新推荐文章于 2024-08-19 11:38:50 发布

优小U

最新推荐文章于 2024-08-19 11:38:50 发布

阅读量306

点赞数 1

分类专栏： Web前端文章标签： tbody可滚动 css3 html5

本文为博主原创文章，未经博主允许不得转载，违者必究。

本文链接：https://blog.csdn.net/zy1281539626/article/details/78129274

版权

Web前端专栏收录该内容

79 篇文章 8 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .fixed_header{
      width: 400px;
    }
    .fixed_header thead {
      background: black;
      color:#fff;
    }
    .fixed_header th, .fixed_header td {
      padding: 5px;
      text-align: left;
      width: 200px;
    }
    .fixed_header tbody{
      display:block;
      overflow:auto;
      height:200px;
      width:100%;
    }
    .fixed_header thead tr{
      display:block;
    }
  </style>
</head>
<body>
  <table class="fixed_header">
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th>Col 5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>row 1-0</td>
        <td>row 1-1</td>
        <td>row 1-2</td>
        <td>row 1-3</td>
        <td>row 1-4</td>
      </tr>
      <tr>
        <td>row 2-0</td>
        <td>row 2-1</td>
        <td>row 2-2</td>
        <td>row 2-3</td>
        <td>row 2-4</td>
      </tr>
      <tr>
        <td>row 3-0</td>
        <td>row 3-1</td>
        <td>row 3-2</td>
        <td>row 3-3</td>
        <td>row 3-4</td>
      </tr>
      <tr>
        <td>row 4-0</td>
        <td>row 4-1</td>
        <td>row 4-2</td>
        <td>row 4-3</td>
        <td>row 4-4</td>
      </tr>
      <tr>
        <td>row 5-0</td>
        <td>row 5-1</td>
        <td>row 5-2</td>
        <td>row 5-3</td>
        <td>row 5-4</td>
      </tr>
      <tr>
        <td>row 6-0</td>
        <td>row 6-1</td>
        <td>row 6-2</td>
        <td>row 6-3</td>
        <td>row 6-4</td>
      </tr>
      <tr>
        <td>row 7-0</td>
        <td>row 7-1</td>
        <td>row 7-2</td>
        <td>row 7-3</td>
        <td>row 7-4</td>
      </tr>
    </tbody>
  </table>
</body>
</html>