How to fix table thead and scrollable tbody(thead contain 3 row)

Question

I have the following problem: My table have big thead (3 row). I wanna fix thead and tbody scrolling. I use jquery

but when I scrolling down, borders thead disappear.

$(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 I try more combination, with css, js. good solution with this jquery, but something wrong. Somebody help me fix this problem. https://jsfiddle.net/testuser1234/w1sb26y3/?

Suhas Suhas · Accepted Answer · 2018-07-02T11:44:58

You will have to fix the height of tbody and then set overflow-y such that it allows scroll.

You can try something like this (taken from this post-- 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;
}

How to fix table thead and scrollable tbody(thead contain 3 row)

1 Answers