526互联

纯CSS实现table固定thead,tbody进行滚动

发布时间 2023-07-11 09:00:05作者: 且行且思

代码一

<!--
 * @Descripttion: 
 * @version: 
 * @Author: yang_ft
 * @Date: 2020-09-29 13:59:26
 * @github: famensaodiseng
 * @LastEditTime: 2020-10-10 17:13:17
-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>纯css固定表格头部滚动内容</title>

  <style>
    .box {
      width: 1000px;
      height: 100%;
      margin: 100px auto;
      background-color: skyblue;
      padding: 20px;
    }

    table {
      border-collapse: collapse;
      background-color: rgba(20, 18, 65, 0.6);
      text-align: center;
      border: 1px solid #000;
      color: #fff;
    }

    caption {
      color: rgb(10, 10, 10);
    }

    th {
      width: 200px;
      height: 50px;
      background-color: rgb(39, 55, 153);
    }

    td {
      height: 50px;
    }

    tr:nth-child(even) {
      background: rgba(3, 96, 255, 0.25);
    }

    tr:hover {
      background: #aedaff;
    }

    table thead {
      display: block;
      width: 100%;
      background: #ddd;
    }

    table tbody {
      display: block;
      height: 300px;
      overflow: auto;
    }

    table td,
    table th {
      width: 200px;
      border-bottom: none;
      border-left: none;
      border-right: 1px solid #CCC;
      border-top: 1px solid #DDD;
      padding: 2px 3px 3px 4px
    }

    table tr {
      border-bottom: 1px solid #B74;
    }

    /* 滚动条样式 content_l 也可以不自定义*/
    tbody::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 2px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }

    tbody::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 2px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #ffffff;
    }

    tbody::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background: rgba(3, 96, 255, 0.25);
    }
  </style>
</head>

<body>
  <div class="box">
    <table border="1">
      <caption>
        <h3>CSS固定表格头部</h3>
      </caption>
      <thead>
        <tr>
          <th>测试</th>
          <th>测试</th>
          <th>测试</th>
          <th>测试</th>
          <th>测试</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>11111</td>
          <td>22222</td>
          <td>33333</td>
          <td>44444</td>
          <td>55555</td>
        </tr>
        <tr>
          <td>11111</td>
          <td>22222</td>
          <td>33333</td>
          <td>44444</td>
          <td>55555</td>
        </tr>
        <tr>
          <td>11111</td>
          <td>22222</td>
          <td>33333</td>
          <td>44444</td>
          <td>55555</td>
        </tr>
        <tr>
          <td>11111</td>
          <td>22222</td>
          <td>33333</td>
          <td>44444</td>
          <td>55555</td>
        </tr>
        <tr>
          <td>11111</td>
          <td>22222</td>
          <td>33333</td>
          <td>44444</td>
          <td>55555</td>
        </tr>
        <tr>
          <td>11111</td>
          <td>22222</td>
          <td>33333</td>
          <td>44444</td>
          <td>55555</td>
        </tr>
        <tr>
          <td>11111</td>
          <td>22222</td>
          <td>33333</td>
          <td>44444</td>
          <td>55555</td>
        </tr>
        <tr>
          <td>11111</td>
          <td>22222</td>
          <td>33333</td>
          <td>44444</td>
          <td>55555</td>
        </tr>
      </tbody>
    </table>


  </div>
</body>

</html>

 

代码二

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>table表格，thead固定，tbody滚动条</title>
  <style>
    table {
      border-collapse: collapse;
    }

    table tbody {
      display: block;
      height: 195px;
      overflow-y: scroll;
    }

    table thead,
    tbody tr {
      display: table;
      width: 99.99%;
      /* 如果此处写100%会出现横向滚动条 */
      table-layout: fixed
    }

    table thead {
      width: calc(100% - 1em)
    }

    table thead th {
      background: #ccc;
    }
  </style>
</head>

<body>
  <table width="80%" border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>出生年月</th>
        <th>手机号码</th>
        <th>单位</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
      <tr>
        <td>张三封</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴与四十大盗</td>
      </tr>
      <tr>
        <td>张小三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>腾讯科技</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>浏阳河就业</td>
      </tr>
      <tr>
        <td>张三疯子</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
      <tr>
        <td>张大三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
      <tr>
        <td>张三五</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
      <tr>
        <td>张刘三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
    </tbody>
  </table>
</body>

</html>