Семантический пользовательский интерфейс - Держите thead видимым при прокрутке tbody

Question

Я пытаюсь понять, как держать голову таблицы видимой при прокрутке. Есть ли в семантической настройке для этого? Или мне просто нужно использовать не-семантическое решение ui?

Чтобы увидеть таблицу, вам необходимо просмотреть «Полная страница».

<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

Как предположил @Stewartside, это не ток, встроенная в семантический UI, но это было discussed.

Answer 2

Заканчивать этот JSFiddle, я думаю, что это такая вещь, что вы ищете .. специально проверить CSS для THEAD тега.

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

Answer 3

Хотя я не рекомендую, если вы действительно хотите работать даже с взломов это должно работать для вас:

<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

Этот сценарий, вероятно, сделать работу за вас. Просто добавьте класс «липкий» в свой тег таблицы и отрегулируйте смещение сверху:

$(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}); 
     } 
    }; 
});