table样式，表头固定，tbody部分超出部分出现滚动条

最新推荐文章于 2024-09-30 08:00:00 发布

whoBright

最新推荐文章于 2024-09-30 08:00:00 发布

阅读量851

点赞数 2

CC 4.0 BY-SA版权

文章标签： HTML

本文链接：https://blog.youkuaiyun.com/qq_32580307/article/details/97765711

1、比较low的方法是，把<thead>和<tbody>分别包裹在两个div里面，tbody的div用overflow:auto,即可。

2、通过css样式实现。

<!DOCTYPE html>
<html>
<head>
  <title>tableStyle</title>
</head>
<body>
   <table class="table2">
          <thead class="h8-w">
            <td>序号</td>
            <td>姓名</td>
            <td>职务</td>
          </thead>
          <tbody>
            <tr>
              <td>test1</td>
              <td>test1</td>
              <td>test1</td>
            </tr>
             <tr>
              <td>test2</td>
              <td>test2</td>
              <td>test2</td>
            </tr>
             <tr>
              <td>test3</td>
              <td>test3</td>
              <td>test3</td>
            </tr>
             <tr>
              <td>test4</td>
              <td>test4</td>
              <td>test4</td>
            </tr>
             <tr>
              <td>test5</td>
              <td>test5</td>
              <td>test5</td>
            </tr>
          </tbody>
        </table>

</body>
</html>
<style type="text/css">
   .table2 {
        position: relative;
        width: 70%;
        border-collapse: collapse;
      }
        thead,
        tbody tr {
          display: table;
          width: 100%;
          table-layout: fixed;
        }
        tbody {
          display: block;
          max-height: 50px;
          overflow-y: auto;
          overflow-x: hidden;
        }

</style>