Always display text in high table cells on top when scrolling

Question

In my project I have a table. In the leftmost column groups are displayed; on the right the details. Sometimes there can be many entries in a group, so that the group may not fit completely on the screen. Since the text in the left column is displayed at the top, it is possible that the label disappears when scrolling.

I've added an example picture for you. The red area represents the viewport. If you scroll down, Group 1 should stay visible until the user scrolls down further.

Is there a way to pin the text to the top of the screen using CSS or JavaScript in such a way that it stays at the top while scrolling, as long as the cell is still in the viewport?

Answer 1

I found a solution. First, you have to put the group labels into a '' element. Then add bootstrap's 'sticky-top' class, or the following attributes:

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

An example would be:

<table>
  <tr>
    <th rowspan="2">
      <span class="sticky-top">Group</span>
    </th>
    <td>Detail</td>
  </tr>
  <tr>
    <td>Detail</td>
  </tr>
</table>

Answer 2

Using "position: sticky;" can help you, I guess.

 div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; }

 <div> <div class="sticky">Im sticky!</div> </div>