javascript - 如何修复 table thead 和可滚动的 tbody(thead 包含 3 行)

Question

我有以下问题:我的 table 有大头(3 行)。我想修复thead 和tbody 滚动。我用jquery

但是当我向下滚动时，边框消失了。

$(document).ready(function() {
  document.querySelector(".tableContainer").addEventListener("scroll", function() {
    var translate = "translate(0," + this.scrollTop + "px)";
    this.querySelector("thead").style.transform = translate;
  });
});

  .TableData {
  border-collapse: collapse;
  font-family: "Arial Narrow", "Franklin Gothic Medium", "Arial";
  font-size: 1.05em;
  width: 100%;
  height: 60vh;
  overflow-x: hidden;
  .TableData td,
  .TableData th {
    border: 1px solid black;
    padding: 2px;
  }
  .TableData>thead>tr>th {
    border: 1px solid black;
    padding: 2px;
    background: #d9edf7;
    vertical-align: middle;
    text-align: center;
  }
  .TableData thead>tr {
    border: 1px solid black;
  }
  .TableData>tbody>tr>th {
    border: 1px solid black;
    padding: 2px;
  }
  .TableData>tbody>tr.tr1 {
    background: #eee;
    font-weight: 600;
  }
  .TableData>tbody>tr.tr1>td {
    vertical-align: middle;
    text-align: center;
  }
  .TableData>tbody>tr.tr2 {
    background: #d9edf7;
    font-weight: 600;
  }
  .TableData>tbody>tr.tr2>td {
    vertical-align: middle;
    text-align: center;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="tableContainer" style="overflow-x:hidden;height:500px;">
  <table class="TableData">
    <thead>
      <tr>
        <th rowspan="3">some text</th>
        <th rowspan="3">some text</th>
        <th>some text</th>
        <th colspan="6">some text</th>
        <th colspan="4">some text</th>
        <th colspan="10">some text some text</th>
        <th colspan="3">some text</th>
        <th rowspan="3">some text</th>
      </tr>
      <tr>
        <th rowspan="2">%</th>
        <th rowspan="2">№ </th>
        <th rowspan="2">Вх-%</th>
        <th colspan="3">some text</th>
        <th rowspan="2">some text</th>
        <th colspan="2">1</th>
        <th colspan="2">2</th>
        <th rowspan="2">Вх-%</th>
        <th colspan="3">NTU</th>
        <th rowspan="2">ΔNTU T2-T1</th>
        <th rowspan="2">Кt,some text</th>
        <th colspan="4">some text</th>
        <th rowspan="2">some text</th>
        <th rowspan="2">% some text</th>
        <th rowspan="2">NTU</th>
      </tr>
      <tr>
        <th>Т0</th>
        <th>Т1</th>
        <th>Т2</th>
        <th>Вх-%</th>
        <th>NTU</th>
        <th>Вх-%</th>
        <th>NTU</th>
        <th>Т0</th>
        <th>Т1</th>
        <th>Т2</th>
        <th>А420</th>
        <th>Т420</th>
        <th>А440</th>
        <th>Т440</th>
      </tr>
    </thead>
  </table>
</div>

PS我尝试更多的组合，与css，js。这个 jquery 很好的解决方案，但是出了点问题。有人帮我解决这个问题。
https://jsfiddle.net/testuser1234/w1sb26y3/ ?

Answer 1

您必须修复 tbody 的高度然后设置overflow-y这样它允许滚动。

你可以尝试这样的事情(取自这篇文章——How can I let a table's body scroll but keep its head fixed in place?)

.TableData thead {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.TableData tbody {
    display: block;
    height: 10em; //CHANGE THIS ACCORDING TO NEED
    overflow-y: scroll;
}
.TableData tbody tr {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.TableData th, .TableData td {
    width: auto;
    border: 1px solid;
}