CSS only scrollable table body

Question

I want to use CSS to scroll only the table body. I found a few examples but they don't work well if the table rows length is different.

I started with this example:

https://codepen.io/pdg/pen/MayBJK

HTML code:

<div class="container">
  <h1>CSS only scrollable table body</h1>
  <p>by PDG</p>
<table class="table-scroll small-first-col">
  <thead>
    <tr>
    <th>Head 1</th>
    <th>Head 2</th>
    <th>Head 3</th>
    <th>Head 4</th>
    </tr>
  </thead>
  <tbody class="body-half-screen">
    <tr>
      <td>1</td>
      <td>First row</td>
      <td>3 dsad sad sad sad sad sadsadsad sadasd asdsa</td>
      <td>4 dasd sad asdsad sad sadsa dasdsad</td>
    </tr>
    <tr>
      <td>1 dasd asd sadsadsad sadsad</td>
      <td>2dsadsadsa dsad sadasd sad sad sa</td>
      <td>A very long cell content comes here, just to test it all!!!</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2 dsad asd asd sad sad sad asdsadsad</td>
      <td>3</td>
      <td></td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>There is an empty cell above!</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td> Last row</td>
    </tr>
  </tbody>
</table>
  <h3>Notes</h3>
  <p>The table uses flex properties to arrange the cell sizes, however, this tends to make them the same as "fixed width". To fix that, you need to create additional classes that target the <strong>td:nth-child()</strong> and <strong>th:nth-child()</strong> with a specific <strong>flex-basis</strong> property.</p>
  <p>The <strong>height</strong> of the body also must be fixed and cannot be percentages (in the example above I use "vh")</p>
</div>

CSS code:

.container{
  padding: 1rem;
  margin: 1rem;
}
.table-scroll{
  /*width:100%; */
  display: block;
  empty-cells: show;

  /* Decoration */
  border-spacing: 0;
  border: 1px solid;
}

.table-scroll thead{
  background-color: #f1f1f1;  
  position:relative;
  display: block;
  width:100%;
  overflow-y: scroll;
}

.table-scroll tbody{
  /* Position */
  display: block; position:relative;
  width:100%; overflow-y:scroll;
  /* Decoration */
  border-top: 1px solid rgba(0,0,0,0.2);
}

.table-scroll tr{
  width: 100%;
  display:flex;
}

.table-scroll td,.table-scroll th{
  flex-basis:100%;
  flex-grow:2;
  display: block;
  padding: 1rem;
  text-align:left;
}

/* Other options */

.table-scroll.small-first-col td:first-child,
.table-scroll.small-first-col th:first-child{
  flex-basis:20%;
  flex-grow:1;
}

.table-scroll tbody tr:nth-child(2n){
  background-color: rgba(130,130,170,0.1);
}

.body-half-screen{
  max-height: 50vh;
}

.small-col{flex-basis:10%;}

It seemed to be a good idea and in their demo everything looks fine, but on a more complex example you can see that the columns are not vertical aligned very well. See my example below:

https://jsfiddle.net/pnfu321g/

I also tried a different example: http://jsfiddle.net/hashem/CrSpu/555/

But this also doesn't work well in my case, on complex tables with rows that have different widths.

Please suggest a css solution (no javascript) that will make a table with rows of any size to look good.

UPDATE

The reason why other solutions didn't worked for me was because I was using an older version of Mozilla Firefox - 57. And that's why almost evrything that I tested didn't worked. I marked the questions as duplicate.

Answer 1

You can use position:sticky on the th elements within the table head.

Basic example (CSS):

table.sticky-headers { width:100%; }
table.sticky-headers thead tr th { text-align:left; position:sticky; top:0; background:#fff; }

Basic markup (Add more rows to get scrollbars):

<table class="sticky-headers">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
            <th>Head 4</th>
            <th>Head 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
   </tbody>
</table>

Working example here: http://jsfiddle.net/yp1xb7dj/

Answer 2

If you want fixed cell width and the text in cells with more content to break and fall on two-three lines, you can try specifying the cell width and the height will be fixed automatically:

table.sticky-headers thead tr th {
    width: 20%;
    text-align:left; 
    position:sticky; 
    top:0; 
    background:#fff;
}

The result: