Having problem with setting scroll in tbody of an html table - the alignments get ruined

Question

I have a table like this:

var mytable2 = "<tbody id='dynamic_table_2'><tr>";

for (var i = 1; i < 51; i++) {
  if (i % 5 == 1 && i != 1) {
    mytable2 += "</tr'><tr>";
  }
  mytable2 += "<td>" + i + "</td>";
}
mytable2 += "</tr></tbody></table>";
$('#here2').append(mytable2);

.container th h1 {
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  color: #185875;
}

.container td {
  font-weight: normal;
  font-size: 1em;
  text-align: center;
  padding: 5px;
  -webkit-box-shadow: 0 2px 2px -2px #0E1119;
  -moz-box-shadow: 0 2px 2px -2px #0E1119;
  box-shadow: 0 2px 2px -2px #0E1119;
}

.container {
  text-align: left;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  display: table;
  padding: 0 0 8em 0;
}

.container td,
.container th {
  padding-bottom: 2%;
  padding-top: 2%;
  padding-left: 2%;
}


/* Background-color of the odd rows */

.container tr:nth-child(odd) {
  background-color: #323C50;
}


/* Background-color of the even rows */

.container tr:nth-child(even) {
  background-color: #2C3446;
}

.container th {
  background-color: #1F2739;
}

.container td:first-child {
  color: #FB667A;
}

.container tr:hover {
  background-color: #464A52;
  -webkit-box-shadow: 0 6px 6px -6px #0E1119;
  -moz-box-shadow: 0 6px 6px -6px #0E1119;
  box-shadow: 0 6px 6px -6px #0E1119;
}

.container td:hover {
  background-color: #FFF842;
  color: #403E10;
  font-weight: bold;
  box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
  transform: translate3d(6px, -6px, 0);
  transition-delay: 0s;
  transition-duration: 0.4s;
  transition-property: all;
  transition-timing-function: line;
}

@media (max-width: 800px) {
  .container td:nth-child(4),
  .container th:nth-child(4) {
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="container" id="here2" style="font-family: Arial">
  <thead>
    <tr>
      <th>
        <h1>Column1</h1>
      </th>
      <th>
        <h1>Column2</h1>
      </th>
      <th>
        <h1>Column3</h1>
      </th>
      <th>
        <h1>Column4</h1>
      </th>
      <th>
        <h1>Column5</h1>
      </th>
    </tr>
  </thead>
</table>

Everything works fine and my table looks like .

The problem starts when I want to use a vertical scroll bar for the tbody of this table.

From A LOT of searches mostly in SO, I finally found something that works but not perfectly. Others have recommended using style='display:block;height:100px;overflow:auto; for tbody and style='display:table;table-layout:fixed;' for trs. When I do, the scroll bar is shown and usable but suddenly all of the cells are pulled to the right of tbody (I am using RTL settings) and it looks like this image: which is not cool! In fact the cells of tbody are no more aligned with the cells in thead!!!! I am really confused. I have tried a lot things but do not seem to figure out what to do to resolve this.

score 2 · Accepted Answer · answered Sep 28 '19 at 20:08

If your scroll bar is not restyled in any browser where it is possible, its width is average 1.1rem

You may then style thead minding this width, and set a padding or set thead as a block with a scrollbar wich is perfectly matching it own width via overflow-x:scroll.

option with overflow-x:scroll for thead

var mytable2 = "<tbody id='dynamic_table_2'><tr>";

for (var i = 1; i < 51; i++) {
  if (i % 5 == 1 && i != 1) {
    mytable2 += "</tr'><tr>";
  }
  mytable2 += "<td>" + i + "</td>";
}
mytable2 += "</tr></tbody></table>";
$('#here2').append(mytable2);

.container th h1 {
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  color: #185875;
}

.container td {
  font-weight: normal;
  font-size: 1em;
  text-align: center;
  padding: 5px;
  -webkit-box-shadow: 0 2px 2px -2px #0E1119;
  -moz-box-shadow: 0 2px 2px -2px #0E1119;
  box-shadow: 0 2px 2px -2px #0E1119;
}

.container {
  text-align: left;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  display: table;
  padding: 0 0 8em 0;
}

.container td,
.container th {
  padding-bottom: 2%;
  padding-top: 2%;
  padding-left: 2%;
}


/* Background-color of the odd rows */

.container tr:nth-child(odd) {
  background-color: #323C50;
}


/* Background-color of the even rows */

.container tr:nth-child(even) {
  background-color: #2C3446;
}

.container th {
  background-color: #1F2739;
}

.container td:first-child {
  color: #FB667A;
}

.container tr:hover {
  background-color: #464A52;
  -webkit-box-shadow: 0 6px 6px -6px #0E1119;
  -moz-box-shadow: 0 6px 6px -6px #0E1119;
  box-shadow: 0 6px 6px -6px #0E1119;
}

.container td:hover {
  background-color: #FFF842;
  color: #403E10;
  font-weight: bold;
  box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
  transform: translate3d(6px, -6px, 0);
  transition-delay: 0s;
  transition-duration: 0.4s;
  transition-property: all;
  transition-timing-function: line;
}

@media (max-width: 800px) {
  .container td:nth-child(4),
  .container th:nth-child(4) {
    display: none;
  }
}

tbody {
  display:block;height:100px;overflow:auto;
}
tr{display:table;table-layout:fixed;width:100%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="container" id="here2" style="font-family: Arial;">
  <thead style=" overflow-y:scroll;display:block;">
    <tr>
      <th>
        <h1>Column1</h1>
      </th>
      <th>
        <h1>Column2</h1>
      </th>
      <th>
        <h1>Column3</h1>
      </th>
      <th>
        <h1>Column4</h1>
      </th>
      <th>
        <h1>Column5</h1>
      </th>
    </tr>
  </thead>
</table>

or the average padding method on thead : ( which is actually a duplicate of How to set tbody height with overflow scroll )

var mytable2 = "<tbody id='dynamic_table_2'><tr>";

for (var i = 1; i < 51; i++) {
  if (i % 5 == 1 && i != 1) {
    mytable2 += "</tr'><tr>";
  }
  mytable2 += "<td>" + i + "</td>";
}
mytable2 += "</tr></tbody></table>";
$('#here2').append(mytable2);

.container th h1 {
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  color: #185875;
}

.container td {
  font-weight: normal;
  font-size: 1em;
  text-align: center;
  padding: 5px;
  -webkit-box-shadow: 0 2px 2px -2px #0E1119;
  -moz-box-shadow: 0 2px 2px -2px #0E1119;
  box-shadow: 0 2px 2px -2px #0E1119;
}

.container {
  text-align: left;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  display: table;
  padding: 0 0 8em 0;
}

.container td,
.container th {
  padding-bottom: 2%;
  padding-top: 2%;
  padding-left: 2%;
}


/* Background-color of the odd rows */

.container tr:nth-child(odd) {
  background-color: #323C50;
}


/* Background-color of the even rows */

.container tr:nth-child(even) {
  background-color: #2C3446;
}

.container th {
  background-color: #1F2739;
}

.container td:first-child {
  color: #FB667A;
}

.container tr:hover {
  background-color: #464A52;
  -webkit-box-shadow: 0 6px 6px -6px #0E1119;
  -moz-box-shadow: 0 6px 6px -6px #0E1119;
  box-shadow: 0 6px 6px -6px #0E1119;
}

.container td:hover {
  background-color: #FFF842;
  color: #403E10;
  font-weight: bold;
  box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
  transform: translate3d(6px, -6px, 0);
  transition-delay: 0s;
  transition-duration: 0.4s;
  transition-property: all;
  transition-timing-function: line;
}

@media (max-width: 800px) {
  .container td:nth-child(4),
  .container th:nth-child(4) {
    display: none;
  }
}

tbody {
  display:block;height:100px;overflow:auto;
}
tr{display:table;table-layout:fixed;width:100%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="container" id="here2" style="font-family: Arial;">
  <thead style="padding-right:1.1rem;display:table;">
    <tr>
      <th>
        <h1>Column1</h1>
      </th>
      <th>
        <h1>Column2</h1>
      </th>
      <th>
        <h1>Column3</h1>
      </th>
      <th>
        <h1>Column4</h1>
      </th>
      <th>
        <h1>Column5</h1>
      </th>
    </tr>
  </thead>
</table>

there is also the display:grid + display:contents option or the wrapper and position:sticky. If all of these CSS option seems not good enough, the last option is to relay on javascript .

Wow. I have been stuck with this for whole 3 days. It works. Thanks a lot. It seems the trick was using width:100%; — Mike, Sep 28 '19 at 20:13

Having problem with setting scroll in tbody of an html table - the alignments get ruined

1 Answers1