0
点赞
收藏
分享

微信扫一扫

table元素,thead固定,tbody滚动

那小那小 2022-05-06 阅读 111

简单整理,thead要减去滚动条宽度,如果不对再调吧

<!DOCTYPE HTML>
<html>

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>table</title>
   <style>
      body {
         padding: 50px 0 0 20px;
      }


      #target_table {
         border-collapse: collapse;
         border-spacing: 0;
      }

      #target_table,
      #target_table>thead,
      #target_table>thead>tr,
      #target_table>thead>tr>th,
      #target_table>thead>tr>td,
      #target_table>tbody,
      #target_table>tbody>tr,
      #target_table>tbody>tr>th,
      #target_table>tbody>tr>td,
      #target_table>tfoot,
      #target_table>tfoot>tr,
      #target_table>tfoot>tr>th,
      #target_table>tfoot>tr>td {
         box-sizing: border-box;
      }

      #target_table>thead,
      #target_table>tbody,
      #target_table>tbody>tr {
         table-layout: fixed;
      }

      #target_table>thead,
      #target_table>tbody>tr {
         display: table;
      }

      #target_table>tbody {
         display: block;
         overflow-y: scroll;
         height: 200px;
      }

      #target_table,
      #target_table>tbody,
      #target_table>tbody>tr {
         width: 100%;
      }

      #target_table>thead {
         width: calc(100% - 10px);
      }

      /*滚动条样式*/
      #target_table>tbody::-webkit-scrollbar {
         /*滚动条整体样式*/
         width: 10px;
         height: 10px;
      }

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

      #target_table>tbody::-webkit-scrollbar-track {
         /*滚动条里面轨道*/
         -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
         /* border-radius: 5px; */
         background: rgba(0, 0, 0, 0.1);
      }

      #target_table>tbody::-webkit-scrollbar-button:single-button {
         background-color: #bbbbbb;
         display: block;
         border-style: solid;
         height: 10px;
      }

      /* Up */
      #target_table>tbody::-webkit-scrollbar-button:single-button:vertical:decrement {
         border-width: 0 5px 6px 5px;
         border-color: transparent transparent #555555 transparent;
      }

      #target_table>tbody::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
         border-color: transparent transparent #777777 transparent;
      }

      /* Down */
      #target_table>tbody::-webkit-scrollbar-button:single-button:vertical:increment {
         border-width: 6px 5px 0 5px;
         border-color: #555555 transparent transparent transparent;
      }

      #target_table>tbody::-webkit-scrollbar-button:vertical:single-button:increment:hover {
         border-color: #777777 transparent transparent transparent;
      }

      #target_table>thead>tr>th {
         padding: 0;
         border-top: 1px solid rgb(84, 82, 82);
         border-bottom: 1px solid rgb(84, 82, 82);
         border-right: 1px solid rgb(84, 82, 82);
      }

      #target_table>thead>tr>th:nth-of-type(1) {
         border-left: 1px solid rgb(84, 82, 82);
      }

      #target_table>tbody>tr>td {
         padding: 0;
         border-left: none;
         border-top: none;
         border-bottom: 1px solid #bababa;
         border-right: 1px solid #bababa;
      }

      #target_table>tbody>tr>td:nth-of-type(1) {
         border-left: 1px solid #bababa;
      }

      #target_table>tbody>tr:nth-of-type(1)>td {
         border-top: 1px solid #3d3d3d;
      }

      #target_table>tbody {
         border-bottom: 1px solid #bababa;
      }

      /*
::-webkit-scrollbar           滚动条整体部分 
::-webkit-scrollbar-thumb     滚动条的可拖拽部分(滑块)
::-webkit-scrollbar-track     滚动条的滚动区域(轨道) 

::-webkit-scrollbar-track-piece     滚动条轨道未被滑块覆盖的部分
::-webkit-scrollbar-corner          垂直滚动条和水平滚动条交汇的部分
::-webkit-scrollbar-button          滚动条两端的上/下(或左/右)按钮

火狐
scrollbar-width       控制滚动条的宽度,只有两个可选项:auto 或 thin
scrollbar-color       接收两个颜色,依次指定滑块和轨道的颜色
      */
   </style>

</head>

<body>
   <table id="target_table">
      <thead>
         <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>出生年月</th>
            <th>手机号码</th>
            <th>单位</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>BBBB</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>呵呵</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>呵呵</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>CCCCC</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>DDDDD</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>BBBB</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>呵呵</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>呵呵</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>CCCCC</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>DDDDD</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>BBBB</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>呵呵</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>呵呵</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>CCCCC</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>DDDDD</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>BBBB</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>呵呵</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>呵呵</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>CCCCC</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>DDDDD</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>BBBB</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>呵呵</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>呵呵</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>CCCCC</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>DDDDD</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>BBBB</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>呵呵</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>呵呵</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>CCCCC</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>DDDDD</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>BBBB</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>呵呵</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>呵呵</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>CCCCC</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>DDDDD</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
         <tr>
            <td>AAA</td>
            <td>18</td>
            <td>1990-9-9</td>
            <td>1388888889999</td>
            <td>啦啦啦</td>
         </tr>
      </tbody>
   </table>
</body>

</html>
举报

相关推荐

0 条评论