Semantic UI - Keep thead visible when scrolling tbody

Question

I'm trying to figure out how to keep the table head visible when scrolling. Is there a setting in semantic ui for this? Or will I just have to use a non-semantic ui solution?

You'll need to view "Full page" to see the table correctly.

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.css" rel="stylesheet" />

<div style="height:200px;overflow:auto">
  <table class="ui small celled striped table" sytle="width:100%">
    <thead>
      <tr>
        <th>Date</th>
        <th>Status</th>
        <th>Facility Name</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody data-bind="foreach:FollowupEntries">
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

I solved the problem with position: sticky, like this:

.ui.table thead tr:first-child > th {
     position: sticky !important;
     top: 0;
     z-index: 2;
}

Answer 2

As @Stewartside suggested, this isn't current built into Semantic UI, but it has been discussed.

Answer 3

Though I don't recommend it if you really really want it to work even with hacks this should work for you:

<table class="semantic's class" style="margin-bottom:0px;border-bottom:none">
   <thead>...</thead>
</table>
<table class="semantic's class" style="margin-top:0px; border-top: none">
  <div style="overflow-y:scroll; height: YOUR-REQUIRED-HEIGHT">
    <thead style="visible:hidden">...</thead>
    <tbody>...</tbody>
  </div>
</table>

Answer 4

This script will probably do the job for you. Just add the class "sticky" to your table tag and adjust the offset from the top:

$(document).ready(function(){
    var tableTop = $('.sticky.table').offset().top;

    $('.sticky.table').children('thead').children('tr').children('th').each( function()  { 
        $(this).css({  width: $(this).outerWidth() }); 
    });

    $(window).scroll(function() {
        var fromTop = $(window).scrollTop(); 

        if($('.sticky.table').length > 0){
            stickyTableHead(fromTop);
        }
    });

    function stickyTableHead(fromTop){
        if(fromTop > tableTop ){
            $('.sticky.table').children('thead').css({'position': 'fixed', top: 0 }); 
        }else{
            $('.sticky.table').children('thead').css({'position': 'relative', top: 0});
        }
    };
});

Answer 5

Applying Ashkan's solution to any table.

table{
  width:100%;
}
table,th,td{
  border: 1px solid grey;
  border-collapse: collapse;
}
thead {
  background-color: grey;
  position: sticky !important;
  top: 0;
  z-index: 2;
}

<div style="overflow: auto; height:100px;">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>ONE</th>
        <th>TWO</th>
        <th>THREE</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td><td>A</td><td>B</td><td>C</td>
      </tr>
      <tr>
        <td>2</td><td>D</td><td>E</td><td>F</td>
      </tr>
      <tr>
        <td>3</td><td>G</td><td>H</td><td>I</td>
      </tr>
      <tr>
        <td>4</td><td>J</td><td>K</td><td>L</td>
      </tr>
      <tr>
        <td>5</td><td>M</td><td>N</td><td>O</td>
      </tr>
      <tr>
        <td>6</td><td>P</td><td>Q</td><td>R</td>
      </tr>
      <tr>
        <td>7</td><td>S</td><td>T</td><td>U</td>
      </tr>
      <tr>
        <td>8</td><td>V</td><td>W</td><td>X</td>
      </tr>
      <tr>
        <td>9</td><td>Y</td><td>Z</td><td>0</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 6

Check out this JSFiddle, I think it is the kind of thing you're looking for.. specifically check out the CSS for the thead tag.

thead { 
position: fixed;
top: 0;
left: 0;
background-color: white;
}