純CSS實現table固定thead,tbody進行滾動.html

本文轉載自查看原文 2020-10-12 09:50 454 網頁常見功能

emmm。公司業務需求。所以自己寫了一個表格固定,不過，網上也看到了另一種方法。都放出來。學習使用。

效果一：

代碼一


<!--
 * @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>

效果二

來源：table表格，thead固定，tbody滾動條

代碼二


<!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>

附帶一個常用的表格功能。table設置不同列寬

效果

代碼


<!--
 * @Descripttion: 
 * @version: 
 * @Author: yang_ft
 * @Date: 2020-09-29 13:59:26
 * @github: famensaodiseng
 * @LastEditTime: 2020-10-10 17:31:14
-->
<!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>頁面模版</title>

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

    table {
      width: 100%;
      border-collapse: collapse;
      word-wrap: break-word;
      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;
      word-wrap: break-word;
    }

    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 {
      width: 100.2%;
      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" style="word-wrap:break-word;">
      <caption>
        <h3>CSS固定表格頭部</h3>
      </caption>
      <thead>
        <tr>
          <th style="width:34%;">測試</th>
          <th>測試</th>
          <th>測試</th>
          <th>測試</th>
          <th>測試</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="width:34%;">11111</td>
          <td>22222</td>
          <td>33333</td>
          <td>4444</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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css——table: thead固定，tbody高度固定超出滾動純CSS,table的thead固定,tbody顯示滾動條 thead固定tbody滾動 table表格，讓thead固定，tbody有滾動條，關鍵是都對齊的純css寫法。 thead固定，tbody高度超出時滾動的實現方法原生table控制tbody滾動而thead不滾動 css 固定表頭，tbody和thead不對齊 Bootstrap表格中，thead固定，tbody有垂直滾動條 css案例學習之用thead、tbody、tfoot實現漂亮的table布局 thead 固定，tbody 超出滾動（附帶改變滾動條樣式）