Table With Scrollable Body And Colgroup Does Not Work

I want to define the width of the cols via colgroup. In addition the tbody shall be scrollable. But is does not work. I s there a solution without js? js fiddle HTML

Solution 1:

add to your css:

td:nth-child(1), th:nth-child(1) {
  width: 15%;
}
td:nth-child(2), th:nth-child(2) {
  width: 40%;
}
td:nth-child(3), th:nth-child(3) {
  width: 20%;
}
td:nth-child(4), th:nth-child(4) {
  width: 25%;
}

tbody scrolling works fine in chrome. i dont know how it is in other browsers

Solution 2:

you need to set display:inline-block; to <col>

col{
  display: inline-block;
  height:20px;
  background: #000;
}

See demo here

Share