如何修复 html table 中的 Header 具有多行 header 以及 row-span 和 coll-span

Question

我正在设置一个 html table，其中有 header <thead> 和 2 <tr>，其中包括 rowspan 和 colspan，我想修复它<thead> 参与我的 html table

<style type="text/css">
    table#customers {
      display: table;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }

    #customers td, #customers th {
      border: 1px solid #ddd;
      padding: 8px;
    }

    #customers tr:nth-child(even){background-color: #f2f2f2;}

    #customers tr:hover {background-color: #ddd;}

    #customers th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      background-color: #2C3B49;
      color: white;
    }

</style>

这里是table

<table id="customers">
    <thead>
        <tr>
           <th rowspan="2">rowspan="2"</th>
           <th rowspan="2">
              <center>rowspan="2"</center>
           </th>
           <th colspan="4">
              <center>colspan="4"</center>
           </th>
           <th colspan="4">
              <center>colspan="4"</center>
           </th>
           <th colspan="4">
              <center>colspan="4"</center>
           </th>
        </tr>
        <tr>
           <th>
              <center>text 1</center>
           </th>
           <th>
              <center>text 2</center>
           </th>
           <th>
              <center>text 3</center>
           </th>
           <th>
              <center>text 4</center>
           </th>
           <th>
              <center>text 1</center>
           </th>
           <th>
              <center>text 2</center>
           </th>
           <th>
              <center>text 3</center>
           </th>
           <th>
              <center>text 4</center>
           </th>
           <th>
              <center>text 1</center>
           </th>
           <th>
              <center>text 2</center>
           </th>
           <th>
              <center>text 3</center>
           </th>
           <th>
              <center>text 4</center>
           </th>
        </tr>
    </thead>
    <tbody>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
    </tbody>
</table>

这里是我做的截图 https://prnt.sc/oz2p1f

我想要的是，整个 <thead> 标签将固定在两个滚动条上，我尝试了很多方法，但没有找到任何对我有帮助的完美示例。

这里有人可以帮助我吗？提前谢谢你

Answer 1

在您的 table 周围添加此 <div>：

<div class="tableFixHead"></div>

添加这个 CSS:

.tableFixHead { overflow-y: auto; height: 400px; }

还有这个jQuery：

var $th = $('.tableFixHead').find('thead th')
$('.tableFixHead').on('scroll', function() {
  $th.css('transform', 'translateY('+ this.scrollTop +'px)');
});

JSFiddle：https://jsfiddle.net/mvoisard/unLx7h1z/8/

Answer 2

你需要一个插件来做到这一点。

我个人使用 floatThead 来做到这一点

使用简单

首先包含 floatThead 模块和 jquery

<script src="YOUR_JQUERY_FOLDER/jquery.min.js" type="text/javascript"></script>
<script src="YOUR_MODULE_FOLDER/jquery.floatThead.min.js" type="text/javascript"></script>

那你就这样

<script>
  $(document).ready(function(){
       $('#customers').floatThead();
  });
</script>

Answer 3

下面的代码，或者你可以在这里看到：https://github.com/FandiAR/advance-table-html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container-recap {
        margin: 0 auto;
        overflow: auto;
        width: 50vw;
        height: 250px;
      }
      table {
        table-layout: fixed;
        width: 100%;
      }
      th,
      td {
        border: 1px solid #000;
        width: 100px;
      }
      th {
        background-color: aqua;
      }
      .no-th {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 1;
        background-color: yellow;
        text-align: center;
      }
      .name-th {
        position: sticky;
        top: 0;
        left: 103px;
        z-index: 1;
        background-color: yellow;
        text-align: center;
      }
      .izin-th {
        position: sticky;
        top: 0;
        right: 0;
        z-index: 1;
        background-color: aquamarine;
        text-align: center;
      }
      .hadir-th {
        position: sticky;
        top: 0;
        right: 103px;
        z-index: 1;
        background-color: aquamarine;
        text-align: center;
      }
      .no-td {
        position: sticky;
        left: 0;
        z-index: 1;
        background: whitesmoke;
        color: black;
        text-align: center;
      }
      .name-td {
        position: sticky;
        left: 103px;
        z-index: 1;
        background: whitesmoke;
        color: black;
        text-align: center;
      }
      .izin-td {
        position: sticky;
        right: 0;
        z-index: 1;
        background: whitesmoke;
        color: black;
        text-align: center;
      }
      .hadir-td {
        position: sticky;
        right: 103px;
        z-index: 1;
        background: whitesmoke;
        color: black;
        text-align: center;
      }
      .no-th,
      .name-th,
      .hadir-th,
      .izin-th {
        z-index: 3;
      }
      .th-th {
        position: sticky;
        top: 0;
      }
      .th-th-th {
        position: sticky;
        top: 23px;
      }
    </style>
  </head>
  <body>
    <div class="container-recap">
      <table>
        <thead>
          <tr>
            <th rowspan="2" class="no-th">No.</th>
            <th rowspan="2" class="name-th">Nama Murid</th>
            <th colspan="2" class="th-th">First Th</th>
            <th colspan="2" class="th-th">Second Th</th>
            <th colspan="2" class="th-th">Third Th</th>
            <th colspan="2" class="th-th">Forth Th</th>
            <th colspan="2" class="th-th">Fifth Th</th>
            <th rowspan="2" class="hadir-th">Hadir</th>
            <th rowspan="2" class="izin-th">Izin</th>
          </tr>

          <tr>
            <th class="th-th-th">Start</th>
            <th class="th-th-th">End</th>
            <th class="th-th-th">Start</th>
            <th class="th-th-th">End</th>
            <th class="th-th-th">Start</th>
            <th class="th-th-th">End</th>
            <th class="th-th-th">Start</th>
            <th class="th-th-th">End</th>
            <th class="th-th-th">Start</th>
            <th class="th-th-th">End</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td class="no-td">1.</td>
            <td class="name-td">John Ddoe</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td class="hadir-td">1</td>
            <td class="izin-td">1</td>
          </tr>
          <tr>
            <td class="no-td">2.</td>
            <td class="name-td">John Ddoe</td>
            <td>12.00</td>
            <td>14.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td class="hadir-td">2</td>
            <td class="izin-td">2</td>
          </tr>
          <tr>
            <td class="no-td">3.</td>
            <td class="name-td">John Ddoe</td>
            <td>12.00</td>
            <td>14.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td class="hadir-td">2</td>
            <td class="izin-td">2</td>
          </tr>
          <tr>
            <td class="no-td">4.</td>
            <td class="name-td">John Ddoe</td>
            <td>12.00</td>
            <td>14.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td class="hadir-td">2</td>
            <td class="izin-td">2</td>
          </tr>
          <tr>
            <td class="no-td">5.</td>
            <td class="name-td">John Ddoe</td>
            <td>12.00</td>
            <td>14.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td class="hadir-td">2</td>
            <td class="izin-td">2</td>
          </tr>
          <tr>
            <td class="no-td">6.</td>
            <td class="name-td">John Ddoe</td>
            <td>12.00</td>
            <td>14.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td class="hadir-td">2</td>
            <td class="izin-td">2</td>
          </tr>
          <tr>
            <td class="no-td">7.</td>
            <td class="name-td">John Ddoe</td>
            <td>12.00</td>
            <td>14.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td class="hadir-td">2</td>
            <td class="izin-td">2</td>
          </tr>
          <tr>
            <td class="no-td">8.</td>
            <td class="name-td">John Ddoe</td>
            <td>12.00</td>
            <td>14.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td class="hadir-td">2</td>
            <td class="izin-td">2</td>
          </tr>
          <tr>
            <td class="no-td">9.</td>
            <td class="name-td">John Ddoe</td>
            <td>12.00</td>
            <td>14.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td class="hadir-td">2</td>
            <td class="izin-td">2</td>
          </tr>
          <tr>
            <td class="no-td">10.</td>
            <td class="name-td">John Ddoe</td>
            <td>12.00</td>
            <td>14.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td>10.00</td>
            <td>12.00</td>
            <td class="hadir-td">2</td>
            <td class="izin-td">2</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

Answer 4

尝试使用纯 css 和 html。

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 40px;
  background-color: #f4f4f4;
}

table {
  position: relative;
  border-collapse: collapse;
  margin: 0 auto;
  width: 60%;
}
table th, table td {
  text-align: center;
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
}
table thead th {
  background: white;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 10;
  font-size: 14px;
}
table thead th:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  height: 80px;
  border-top: 1px solid #dcebff;
  border-bottom: 1px solid #dcebff;
  border-right: 1px solid #dcebff;
  background-color: aliceblue;
  z-index: -1;
}
table thead th:first-child:after {
  border-left: 1px solid #dcebff;
}
table thead th.multiple-col {
  padding: 0;
}
table thead th.multiple-col > div {
  height: 40px;
  box-sizing: border-box;
}
table thead th.multiple-col > div:first-child {
  border-bottom: 1px solid #dcebff;
}
table thead th.multiple-col > div:last-child {
  display: flex;
}
table thead th.multiple-col > div:last-child > div {
  position: relative;
  width: 50%;
}
table thead th.multiple-col > div:last-child > div:first-child:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-right: 1px solid #dcebff;
}
table tbody > tr > td {
  position: relative;
  font-size: 14px;
  z-index: 5;
  background-color: #fff;
  font-size: 13px;
}
table tbody > tr > td > div {
  position: relative;
  z-index: 30;
  line-height: 24px;
}
table tbody > tr > td:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #dcebff;
  border-right: 1px solid #dcebff;
}
table tbody > tr > td:first-child:after {
  border-left: 1px solid #dcebff;
}
table tbody > tr > td:first-child, table tbody > tr > td:nth-child(2) {
  width: 180px;
  margin: 0 auto;
}

<body>
  <table id="table_main">
    <thead>
      <tr>
        <th class="multiple-col" colspan="2">
          <div>Personal Info</div>
          <div>
            <div>Name</div>
            <div>Age</div>
          </div>
        </th>
        <th>Job</th>
        <th>Color</th>
        <th>URL</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><div>Lorem.</div></td>
        <td><div>Ullam.</div></td>
        <td><div>Vel.</div></td>
        <td><div>At.</div></td>
        <td><div>Quis.</div></td>
      </tr>
      <tr>
        <td><div>Quas!</div></td>
        <td><div>Velit.</div></td>
        <td><div>Quisquam?</div></td>
        <td><div>Rerum?</div></td>
        <td><div>Iusto?</div></td>
      </tr>
      <tr>
        <td><div>Voluptates!</div></td>
        <td><div>Fugiat?</div></td>
        <td><div>Alias.</div></td>
        <td><div>Doloribus.</div></td>
        <td><div>Veritatis.</div></td>
      </tr>
      <tr>
        <td><div>Maiores.</div></td>
        <td><div>Ab.</div></td>
        <td><div>Accusantium.</div></td>
        <td><div>Ullam!</div></td>
        <td><div>Eveniet.</div></td>
      </tr>
      <tr>
        <td><div>Hic.</div></td>
        <td><div>Id!</div></td>
        <td><div>Officiis.</div></td>
        <td><div>Modi!</div></td>
        <td><div>Obcaecati.</div></td>
      </tr>
      <tr>
        <td><div>Soluta.</div></td>
        <td><div>Ad!</div></td>
        <td><div>Impedit.</div></td>
        <td><div>Alias!</div></td>
        <td><div>Ad.</div></td>
      </tr>
      <tr>
        <td><div>Expedita.</div></td>
        <td><div>Quo.</div></td>
        <td><div>Exercitationem!</div></td>
        <td><div>Optio?</div></td>
        <td><div>Ipsum?</div></td>
      </tr>
      <tr>
        <td><div>Commodi!</div></td>
        <td><div>Rem.</div></td>
        <td><div>Aspernatur.</div></td>
        <td><div>Accusantium!</div></td>
        <td><div>Maiores.</div></td>
      </tr>
      <tr>
        <td><div>Omnis.</div></td>
        <td><div>Cumque?</div></td>
        <td><div>Eveniet!</div></td>
        <td><div>Mollitia?</div></td>
        <td><div>Vero.</div></td>
      </tr>
      <tr>
        <td><div>Error!</div></td>
        <td><div>Inventore.</div></td>
        <td><div>Quasi!</div></td>
        <td><div>Ducimus.</div></td>
        <td><div>Repudiandae!</div></td>
      </tr>
      <tr>
        <td><div>Dolores!</div></td>
        <td><div>Necessitatibus.</div></td>
        <td><div>Corrupti!</div></td>
        <td><div>Eum.</div></td>
        <td><div>Sunt!</div></td>
      </tr>
      <tr>
        <td><div>Ea.</div></td>
        <td><div>Culpa?</div></td>
        <td><div>Quam?</div></td>
        <td><div>Nemo!</div></td>
        <td><div>Sit!</div></td>
      </tr>
      <tr>
        <td><div>Veritatis!</div></td>
        <td><div>Facilis.</div></td>
        <td><div>Expedita?</div></td>
        <td><div>Ipsam!</div></td>
        <td><div>Omnis!</div></td>
      </tr>
      <tr>
        <td><div>Vitae.</div></td>
        <td><div>Cumque.</div></td>
        <td><div>Repudiandae.</div></td>
        <td><div>Ut?</div></td>
        <td><div>Sed!</div></td>
      </tr>
      <tr>
        <td><div>Accusantium.</div></td>
        <td><div>Adipisci.</div></td>
        <td><div>Sit.</div></td>
        <td><div>Maxime.</div></td>
        <td><div>Harum.</div></td>
      </tr>
      <tr>
        <td><div>Qui!</div></td>
        <td><div>Accusamus?</div></td>
        <td><div>Minima?</div></td>
        <td><div>Dolorum.</div></td>
        <td><div>Molestiae.</div></td>
      </tr>
      <tr>
        <td><div>Vero!</div></td>
        <td><div>Voluptatum?</div></td>
        <td><div>Ea?</div></td>
        <td><div>Odit!</div></td>
        <td><div>A.</div></td>
      </tr>
      <tr>
        <td><div>Debitis.</div></td>
        <td><div>Veniam.</div></td>
        <td><div>Fuga.</div></td>
        <td><div>Alias!</div></td>
        <td><div>Recusandae!</div></td>
      </tr>
      <tr>
        <td><div>Aperiam!</div></td>
        <td><div>Dolorum.</div></td>
        <td><div>Enim.</div></td>
        <td><div>Sapiente!</div></td>
        <td><div>Suscipit?</div></td>
      </tr>
      <tr>
        <td><div>Consequuntur.</div></td>
        <td><div>Doloremque.</div></td>
        <td><div>Illum!</div></td>
        <td><div>Iste!</div></td>
        <td><div>Sint!</div></td>
      </tr>
      <tr>
        <td><div>Facilis.</div></td>
        <td><div>Error.</div></td>
        <td><div>Fugiat.</div></td>
        <td><div>At.</div></td>
        <td><div>Modi?</div></td>
      </tr>
      <tr>
        <td><div>Voluptatibus!</div></td>
        <td><div>Alias.</div></td>
        <td><div>Eaque.</div></td>
        <td><div>Cum.</div></td>
        <td><div>Ducimus!</div></td>
      </tr>
      <tr>
        <td><div>Nihil.</div></td>
        <td><div>Enim.</div></td>
        <td><div>Earum?</div></td>
        <td><div>Nobis?</div></td>
        <td><div>Eveniet.</div></td>
      </tr>
      <tr>
        <td><div>Eum!</div></td>
        <td><div>Id?</div></td>
        <td><div>Molestiae.</div></td>
        <td><div>Velit.</div></td>
        <td><div>Minima.</div></td>
      </tr>
      <tr>
        <td><div>Sapiente?</div></td>
        <td><div>Neque.</div></td>
        <td><div>Obcaecati!</div></td>
        <td><div>Earum.</div></td>
        <td><div>Esse.</div></td>
      </tr>
      <tr>
        <td><div>Nam?</div></td>
        <td><div>Ipsam!</div></td>
        <td><div>Provident.</div></td>
        <td><div>Ullam.</div></td>
        <td><div>Quae?</div></td>
      </tr>
      <tr>
        <td><div>Amet!</div></td>
        <td><div>In.</div></td>
        <td><div>Officia!</div></td>
        <td><div>Natus?</div></td>
        <td><div>Tempore?</div></td>
      </tr>
      <tr>
        <td><div>Consequatur.</div></td>
        <td><div>Hic.</div></td>
        <td><div>Officia.</div></td>
        <td><div>Itaque?</div></td>
        <td><div>Quasi.</div></td>
      </tr>
      <tr>
        <td><div>Enim.</div></td>
        <td><div>Tenetur.</div></td>
        <td><div>Asperiores?</div></td>
        <td><div>Eos!</div></td>
        <td><div>Libero.</div></td>
      </tr>
      <tr>
        <td><div>Exercitationem.</div></td>
        <td><div>Quidem!</div></td>
        <td><div>Beatae?</div></td>
        <td><div>Adipisci?</div></td>
        <td><div>Accusamus.</div></td>
      </tr>
      <tr>
        <td><div>Omnis.</div></td>
        <td><div>Accusamus?</div></td>
        <td><div>Eius!</div></td>
        <td><div>Recusandae!</div></td>
        <td><div>Dolor.</div></td>
      </tr>
      <tr>
        <td><div>Magni.</div></td>
        <td><div>Temporibus!</div></td>
        <td><div>Odio!</div></td>
        <td><div>Odit!</div></td>
        <td><div>Voluptatum?</div></td>
      </tr>
      <tr>
        <td><div>Eum.</div></td>
        <td><div>Animi!</div></td>
        <td><div>Labore.</div></td>
        <td><div>Alias!</div></td>
        <td><div>Fuga.</div></td>
      </tr>
      <tr>
        <td><div>Quia!</div></td>
        <td><div>Quis.</div></td>
        <td><div>Neque?</div></td>
        <td><div>Illo.</div></td>
        <td><div>Ad.</div></td>
      </tr>
      <tr>
        <td><div>Officiis.</div></td>
        <td><div>Exercitationem!</div></td>
        <td><div>Adipisci?</div></td>
        <td><div>Officiis?</div></td>
        <td><div>In?</div></td>
      </tr>
      <tr>
        <td><div>Voluptates?</div></td>
        <td><div>Voluptatum.</div></td>
        <td><div>Nihil.</div></td>
        <td><div>Totam?</div></td>
        <td><div>Quisquam!</div></td>
      </tr>
      <tr>
        <td><div>Soluta.</div></td>
        <td><div>Tempore!</div></td>
        <td><div>Cupiditate.</div></td>
        <td><div>Beatae.</div></td>
        <td><div>Perspiciatis.</div></td>
      </tr>
      <tr>
        <td><div>Porro.</div></td>
        <td><div>Officia?</div></td>
        <td><div>Error.</div></td>
        <td><div>Culpa?</div></td>
        <td><div>Fugit.</div></td>
      </tr>
      <tr>
        <td><div>Et?</div></td>
        <td><div>Nemo.</div></td>
        <td><div>Nisi?</div></td>
        <td><div>Totam!</div></td>
        <td><div>Voluptate.</div></td>
      </tr>
      <tr>
        <td><div>Saepe?</div></td>
        <td><div>Vero.</div></td>
        <td><div>Amet?</div></td>
        <td><div>Illo!</div></td>
        <td><div>Laborum!</div></td>
      </tr>
      <tr>
        <td><div>Atque!</div></td>
        <td><div>Tenetur.</div></td>
        <td><div>Optio.</div></td>
        <td><div>Iure.</div></td>
        <td><div>Porro.</div></td>
      </tr>
      <tr>
        <td><div>Atque.</div></td>
        <td><div>Alias.</div></td>
        <td><div>Doloremque.</div></td>
        <td><div>Velit.</div></td>
        <td><div>Culpa.</div></td>
      </tr>
      <tr>
        <td><div>Placeat?</div></td>
        <td><div>Necessitatibus.</div></td>
        <td><div>Voluptate!</div></td>
        <td><div>Possimus.</div></td>
        <td><div>Nam?</div></td>
      </tr>
      <tr>
        <td><div>Illum!</div></td>
        <td><div>Quae.</div></td>
        <td><div>Expedita!</div></td>
        <td><div>Omnis.</div></td>
        <td><div>Nam.</div></td>
      </tr>
      <tr>
        <td><div>Consequuntur!</div></td>
        <td><div>Consectetur!</div></td>
        <td><div>Provident!</div></td>
        <td><div>Consequuntur!</div></td>
        <td><div>Distinctio.</div></td>
      </tr>
      <tr>
        <td><div>Aperiam!</div></td>
        <td><div>Voluptatem.</div></td>
        <td><div>Cupiditate!</div></td>
        <td><div>Quae.</div></td>
        <td><div>Praesentium.</div></td>
      </tr>
      <tr>
        <td><div>Possimus?</div></td>
        <td><div>Qui.</div></td>
        <td><div>Consequuntur.</div></td>
        <td><div>Deleniti.</div></td>
        <td><div>Voluptas.</div></td>
      </tr>
      <tr>
        <td><div>Hic?</div></td>
        <td><div>Ab.</div></td>
        <td><div>Asperiores?</div></td>
        <td><div>Omnis.</div></td>
        <td><div>Animi!</div></td>
      </tr>
      <tr>
        <td><div>Cupiditate.</div></td>
        <td><div>Velit.</div></td>
        <td><div>Libero.</div></td>
        <td><div>Iste.</div></td>
        <td><div>Dicta?</div></td>
      </tr>
      <tr>
        <td><div>Consequatur!</div></td>
        <td><div>Nobis.</div></td>
        <td><div>Aperiam!</div></td>
        <td><div>Odio.</div></td>
        <td><div>Nemo!</div></td>
      </tr>
      <tr>
        <td><div>Dolorem.</div></td>
        <td><div>Distinctio?</div></td>
        <td><div>Provident?</div></td>
        <td><div>Nisi!</div></td>
        <td><div>Impedit?</div></td>
      </tr>
      <tr>
        <td><div>Accusantium?</div></td>
        <td><div>Ea.</div></td>
        <td><div>Doloribus.</div></td>
        <td><div>Nobis.</div></td>
        <td><div>Maxime?</div></td>
      </tr>
      <tr>
        <td><div>Molestiae.</div></td>
        <td><div>Rem?</div></td>
        <td><div>Enim!</div></td>
        <td><div>Maxime?</div></td>
        <td><div>Reiciendis!</div></td>
      </tr>
      <tr>
        <td><div>Commodi.</div></td>
        <td><div>At.</div></td>
        <td><div>Earum?</div></td>
        <td><div>Fugit.</div></td>
        <td><div>Maxime?</div></td>
      </tr>
      <tr>
        <td><div>Eligendi?</div></td>
        <td><div>Quis.</div></td>
        <td><div>Error?</div></td>
        <td><div>Atque.</div></td>
        <td><div>Perferendis.</div></td>
      </tr>
      <tr>
        <td><div>Quidem.</div></td>
        <td><div>Odit!</div></td>
        <td><div>Tempore.</div></td>
        <td><div>Voluptates.</div></td>
        <td><div>Facere!</div></td>
      </tr>
      <tr>
        <td><div>Repudiandae!</div></td>
        <td><div>Accusamus?</div></td>
        <td><div>Soluta.</div></td>
        <td><div>Incidunt.</div></td>
        <td><div>Aliquid?</div></td>
      </tr>
      <tr>
        <td><div>Quisquam?</div></td>
        <td><div>Eius.</div></td>
        <td><div>Obcaecati?</div></td>
        <td><div>Maxime.</div></td>
        <td><div>Nihil.</div></td>
      </tr>
      <tr>
        <td><div>Minus.</div></td>
        <td><div>Magni?</div></td>
        <td><div>Necessitatibus?</div></td>
        <td><div>Asperiores.</div></td>
        <td><div>Iure.</div></td>
      </tr>
      <tr>
        <td><div>Ipsa!</div></td>
        <td><div>Temporibus.</div></td>
        <td><div>Non!</div></td>
        <td><div>Dolore.</div></td>
        <td><div>Veritatis.</div></td>
      </tr>
      <tr>
        <td><div>Ea!</div></td>
        <td><div>Officia?</div></td>
        <td><div>Doloribus?</div></td>
        <td><div>Deleniti?</div></td>
        <td><div>Dolorem!</div></td>
      </tr>
      <tr>
        <td><div>Sequi?</div></td>
        <td><div>Molestias!</div></td>
        <td><div>Nesciunt.</div></td>
        <td><div>Qui.</div></td>
        <td><div>Doloribus?</div></td>
      </tr>
      <tr>
        <td><div>Id.</div></td>
        <td><div>Enim?</div></td>
        <td><div>Quam!</div></td>
        <td><div>Sunt!</div></td>
        <td><div>Consequuntur.</div></td>
      </tr>
      <tr>
        <td><div>Reprehenderit?</div></td>
        <td><div>Ut?</div></td>
        <td><div>Veritatis!</div></td>
        <td><div>Corporis!</div></td>
        <td><div>Ipsa.</div></td>
      </tr>
      <tr>
        <td><div>Blanditiis!</div></td>
        <td><div>Veniam!</div></td>
        <td><div>Tenetur.</div></td>
        <td><div>Eos?</div></td>
        <td><div>Repellat!</div></td>
      </tr>
      <tr>
        <td><div>Enim?</div></td>
        <td><div>Atque!</div></td>
        <td><div>Aspernatur?</div></td>
        <td><div>Fugit.</div></td>
        <td><div>Voluptatibus!</div></td>
      </tr>
      <tr>
        <td><div>Nihil.</div></td>
        <td><div>Distinctio!</div></td>
        <td><div>Aut!</div></td>
        <td><div>Rerum!</div></td>
        <td><div>Dolorem?</div></td>
      </tr>
      <tr>
        <td><div>Inventore!</div></td>
        <td><div>Hic.</div></td>
        <td><div>Explicabo.</div></td>
        <td><div>Sit.</div></td>
        <td><div>A.</div></td>
      </tr>
      <tr>
        <td><div>Inventore.</div></td>
        <td><div>A.</div></td>
        <td><div>Nam.</div></td>
        <td><div>Beatae.</div></td>
        <td><div>Consequatur.</div></td>
      </tr>
      <tr>
        <td><div>Eligendi.</div></td>
        <td><div>Illum.</div></td>
        <td><div>Enim?</div></td>
        <td><div>Dignissimos!</div></td>
        <td><div>Ducimus?</div></td>
      </tr>
      <tr>
        <td><div>Eligendi!</div></td>
        <td><div>Fugiat?</div></td>
        <td><div>Deleniti!</div></td>
        <td><div>Rerum?</div></td>
        <td><div>Delectus?</div></td>
      </tr>
      <tr>
        <td><div>Sit.</div></td>
        <td><div>Nam.</div></td>
        <td><div>Eveniet?</div></td>
        <td><div>Veritatis.</div></td>
        <td><div>Adipisci!</div></td>
      </tr>
      <tr>
        <td><div>Nostrum?</div></td>
        <td><div>Totam?</div></td>
        <td><div>Voluptates!</div></td>
        <td><div>Ab!</div></td>
        <td><div>Consequatur.</div></td>
      </tr>
      <tr>
        <td><div>Error!</div></td>
        <td><div>Dicta?</div></td>
        <td><div>Voluptatum?</div></td>
        <td><div>Corporis!</div></td>
        <td><div>Ea.</div></td>
      </tr>
      <tr>
        <td><div>Vel.</div></td>
        <td><div>Asperiores.</div></td>
        <td><div>Facere.</div></td>
        <td><div>Quae.</div></td>
        <td><div>Fugiat.</div></td>
      </tr>
      <tr>
        <td><div>Libero?</div></td>
        <td><div>Molestias.</div></td>
        <td><div>Praesentium!</div></td>
        <td><div>Accusantium!</div></td>
        <td><div>Tenetur.</div></td>
      </tr>
      <tr>
        <td><div>Eveniet.</div></td>
        <td><div>Quam.</div></td>
        <td><div>Quibusdam.</div></td>
        <td><div>Eaque?</div></td>
        <td><div>Dolore!</div></td>
      </tr>
      <tr>
        <td><div>Asperiores.</div></td>
        <td><div>Impedit.</div></td>
        <td><div>Ullam?</div></td>
        <td><div>Quod.</div></td>
        <td><div>Placeat.</div></td>
      </tr>
      <tr>
        <td><div>In?</div></td>
        <td><div>Aliquid.</div></td>
        <td><div>Voluptatum!</div></td>
        <td><div>Omnis?</div></td>
        <td><div>Magni.</div></td>
      </tr>
      <tr>
        <td><div>Autem.</div></td>
        <td><div>Earum!</div></td>
        <td><div>Debitis!</div></td>
        <td><div>Eius.</div></td>
        <td><div>Incidunt.</div></td>
      </tr>
      <tr>
        <td><div>Blanditiis?</div></td>
        <td><div>Impedit.</div></td>
        <td><div>Libero?</div></td>
        <td><div>Reiciendis!</div></td>
        <td><div>Tempore.</div></td>
      </tr>
      <tr>
        <td><div>Quasi.</div></td>
        <td><div>Reiciendis.</div></td>
        <td><div>Aut?</div></td>
        <td><div>Architecto?</div></td>
        <td><div>Vero!</div></td>
      </tr>
      <tr>
        <td><div>Fuga!</div></td>
        <td><div>Illum!</div></td>
        <td><div>Tenetur!</div></td>
        <td><div>Vitae.</div></td>
        <td><div>Natus.</div></td>
      </tr>
      <tr>
        <td><div>Dolorem?</div></td>
        <td><div>Eaque!</div></td>
        <td><div>Vero?</div></td>
        <td><div>Quibusdam.</div></td>
        <td><div>Deleniti?</div></td>
      </tr>
      <tr>
        <td><div>Minus.</div></td>
        <td><div>Accusantium?</div></td>
        <td><div>Ab.</div></td>
        <td><div>Cupiditate.</div></td>
        <td><div>Atque?</div></td>
      </tr>
      <tr>
        <td><div>Hic.</div></td>
        <td><div>Eligendi.</div></td>
        <td><div>Sit?</div></td>
        <td><div>Nihil.</div></td>
        <td><div>Dolor.</div></td>
      </tr>
      <tr>
        <td><div>Quidem.</div></td>
        <td><div>In?</div></td>
        <td><div>Nesciunt?</div></td>
        <td><div>Adipisci.</div></td>
        <td><div>Neque.</div></td>
      </tr>
      <tr>
        <td><div>Eos.</div></td>
        <td><div>Incidunt!</div></td>
        <td><div>Quis?</div></td>
        <td><div>Quod?</div></td>
        <td><div>Vitae!</div></td>
      </tr>
      <tr>
        <td><div>Ullam!</div></td>
        <td><div>Facilis.</div></td>
        <td><div>Tempora!</div></td>
        <td><div>Accusantium.</div></td>
        <td><div>Consequuntur?</div></td>
      </tr>
      <tr>
        <td><div>Numquam?</div></td>
        <td><div>At.</div></td>
        <td><div>Incidunt.</div></td>
        <td><div>Tenetur?</div></td>
        <td><div>Voluptatem.</div></td>
      </tr>
      <tr>
        <td><div>Iusto?</div></td>
        <td><div>Inventore.</div></td>
        <td><div>Molestias.</div></td>
        <td><div>Accusantium.</div></td>
        <td><div>Sunt.</div></td>
      </tr>
      <tr>
        <td><div>Repellendus!</div></td>
        <td><div>Ex.</div></td>
        <td><div>Magnam.</div></td>
        <td><div>Odit!</div></td>
        <td><div>Iste?</div></td>
      </tr>
      <tr>
        <td><div>Id!</div></td>
        <td><div>Reiciendis?</div></td>
        <td><div>Rem.</div></td>
        <td><div>Quae!</div></td>
        <td><div>Laborum?</div></td>
      </tr>
      <tr>
        <td><div>Exercitationem?</div></td>
        <td><div>Maiores.</div></td>
        <td><div>Minima.</div></td>
        <td><div>Nemo!</div></td>
        <td><div>Sequi.</div></td>
      </tr>
      <tr>
        <td><div>Qui.</div></td>
        <td><div>Impedit?</div></td>
        <td><div>Reprehenderit.</div></td>
        <td><div>Distinctio.</div></td>
        <td><div>Natus?</div></td>
      </tr>
      <tr>
        <td><div>Suscipit!</div></td>
        <td><div>Tenetur.</div></td>
        <td><div>Cumque!</div></td>
        <td><div>Molestiae.</div></td>
        <td><div>Fugiat?</div></td>
      </tr>
      <tr>
        <td><div>Sunt?</div></td>
        <td><div>Quis?</div></td>
        <td><div>Officia.</div></td>
        <td><div>Incidunt.</div></td>
        <td><div>Voluptate.</div></td>
      </tr>
      <tr>
        <td><div>Possimus.</div></td>
        <td><div>Mollitia!</div></td>
        <td><div>Eveniet!</div></td>
        <td><div>Temporibus.</div></td>
        <td><div>Mollitia!</div></td>
      </tr>
      <tr>
        <td><div>Incidunt.</div></td>
        <td><div>Fugiat.</div></td>
        <td><div>Error.</div></td>
        <td><div>Odit.</div></td>
        <td><div>Cumque?</div></td>
      </tr>
      <tr>
        <td><div>Maxime?</div></td>
        <td><div>Qui!</div></td>
        <td><div>Sapiente!</div></td>
        <td><div>Natus.</div></td>
        <td><div>Soluta?</div></td>
      </tr>
    </tbody>
  </table>
</body>

如何修复 html table 中的 Header 具有多行 header 以及 row-span 和 coll-span

How to Fixed Header in html table with have multiple row header with row-span and coll-span

css

html-table

fixed-header-tables