完美tbody滚动效果

Z技术 2021年01月23日 1,312次浏览

效果图：

 

50bb8d69ee834142a4f576a87384549b.png

 源码：

  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <style>
  6.         *{
  7.             margin: 0;
  8.             padding: 0;
  9.             box-sizing: border-box;
  10.         }
  11.         .mytable{
  12.             width: 800px;
  13.             background-color: whitesmoke;
  14.             /* 相邻边被合并 */
  15.             border-collapse:collapse;
  16.             border-spacing:0;
  17.             margin:10px;
  18.         }
  19.         .mytable thead{
  20.             background-color:gainsboro;
  21.         }
  22.         .mytable tbody {
  23.             display: block;
  24.             height: 400px;
  25.             overflow-y: scroll;
  26.             overflow-x: hidden;
  27.         }
  28.         .mytable thead,.mytable tbody tr,.mytable tfoot tr {
  29.             display: table;
  30.             width: 100%;
  31.             table-layout: fixed;
  32.             font-size: 16px;
  33.             text-align: center;
  34.             border-bottom: 1px solid gray;
  35.         }
  36.         .mytable thead {
  37.             /* 预留滚动overflow-y的空间 */
  38.             width: calc(100% - 1em);
  39.             height: 30px;
  40.         }
  41.         .mytable td{
  42.             border-left: 1px solid gray;
  43.         }
  44.         .mytable tfoot tr{
  45.             border: none;
  46.         }
  47.         .mytable tfoot td{
  48.             text-align: right;
  49.             padding-right: 1em;
  50.             border: none;
  51.         }
  52.         .mytable .index1{
  53.             width: 50px;
  54.         }
  55.         .mytable .index2{
  56.             width: 100px;
  57.         }
  58.     </style>
  59. </head>

  61. <body>
  62.     <div style="width: 100%;">
  63.         <table class="mytable" >
  64.             <thead>
  65.                 <tr>
  66.                     <td class="index1">序号</td>
  67.                     <td class="index2">列1</td>
  68.                     <td>列2</td>
  69.                     <td>列3</td>
  70.                     <td>列4</td>
  71.                 </tr>
  72.             </thead>
  73.             <tbody>
  74.                 <tr>
  75.                     <td class="index1">1</td>
  76.                     <td class="index2">列列列列列列列列列</td>
  77.                     <td>列列列列列列列列列列列列列列列列列列</td>
  78.                     <td>列列列</td>
  79.                     <td>列列列列列列</td>
  80.                 </tr>
  81.                 <tr>
  82.                     <td class="index1">1</td>
  83.                     <td class="index2">列列列列列列列列列</td>
  84.                     <td>列列列</td>
  85.                     <td>列列列列列列</td>
  86.                     <td>列列列列列列列列列列列列列列列列列列</td>
  87.                 </tr>
  88.                 <tr>
  89.                     <td class="index1">1</td>
  90.                     <td class="index2">列列列列列列列列列</td>
  91.                     <td>列列列列列列</td>
  92.                     <td>列列列</td>
  93.                     <td>列列列列列列列列列列列列列列列列列列</td>
  94.                 </tr>
  95.                 <tr>
  96.                     <td class="index1">1</td>
  97.                     <td class="index2">列列列列列列列列列列列列列列列列列列</td>
  98.                     <td>列列列列列列列列列</td>
  99.                     <td>列列列</td>
  100.                     <td>列列列列列列</td>
  101.                 </tr>
  102.                 <tr>
  103.                     <td class="index1">1</td>
  104.                     <td class="index2">列列列列列列列列列</td>
  105.                     <td>列列列</td>
  106.                     <td>列列列列列列</td>
  107.                     <td>列列列列列列列列列列列列列列列列列列</td>
  108.                 </tr>
  109.                 <tr>
  110.                     <td class="index1">1</td>
  111.                     <td class="index2">列列列列列列列列列</td>
  112.                     <td>列列列</td>
  113.                     <td>列列列列列列</td>
  114.                     <td>列列列列列列列列列列列列列列列列列列</td>
  115.                 </tr>
  116.                 <tr>
  117.                     <td class="index1">1</td>
  118.                     <td class="index2">列列列列列列列列列</td>
  119.                     <td>列列列</td>
  120.                     <td>列列列列列列</td>
  121.                     <td>列列列列列列列列列列列列列列列列列列</td>
  122.                 </tr>
  123.                 <tr>
  124.                     <td class="index1">1</td>
  125.                     <td class="index2">列列列列列列列列列</td>
  126.                     <td>列列列</td>
  127.                     <td>列列列列列列</td>
  128.                     <td>列列列列列列列列列列列列列列列列列列</td>
  129.                 </tr>
  130.                 <tr>
  131.                     <td class="index1">1</td>
  132.                     <td class="index2">列列列列列列列列列</td>
  133.                     <td>列列列</td>
  134.                     <td>列列列列列列</td>
  135.                     <td>列列列列列列列列列列列列列列列列列列</td>
  136.                 </tr>
  137.             </tbody>
  138.             <tfoot>
  139.                 <tr>
  140.                     <td colspan="4">共100条</td>
  141.                 </tr>
  142.             </tfoot>
  143.         </table>
  144.     </div>

  146. </body>

  148. </html>


 

 更多信息请关注公众号：
20220401152838


上一篇： Autofac之AOP实现执行方法监控