如何修复表格thead和可滚动的正文（标题包含3行）

Question

我遇到以下问题：我的桌子有大桌子（3行）。我想修复thead和肢体滚动。我使用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>

P.S我尝试使用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;
}