0
点赞
收藏
分享

微信扫一扫

table元素，thead固定，tbody滚动

那小那小 2022-05-06 阅读 111
csshtml前端

简单整理，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>
举报

相关推荐

table表格，让thead固定，tbody内容滚动，关键是都对齐的纯css写法

css前端htmlbootstrap

table设置tbody滚动条

css3html5htmlvue.jsjavascript前端开发

实现table 表体tbody滚动 表头不滚动

elementuijavascriptvue.js数据JavaScript前端开发

Vue3在大数据场景下原生实现单元格合并，让Thead固定让Tbody滚动

ui用户界面用户体验

html tbale 中对tr td 做的一下操作总结 table样式 和几个例子 thead不动，tbody 滚动 和滚动条

html数据宽高Linux系统/运维

GridView(table) 滚动条 固定表头、列

tableclassborderxhtmldiv编程语言

vue+elementUI的tabs与table表格联动固定与滚动位置

vue.jselementui前端

el-table自定义样式，表头固定，数据过多时滚动

css前端

element table自动滚动

javascriptelementuivue

el-table(vue2中）滚动条被固定列盖住

vue.jselementui前端
0 条评论