Semantic UI - Keep thead visible when scrolling tbody - html

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;
}