语义UI - 滚动tbody时保持thead可见

时间:2015-04-27 21:20:20

标签: html css semantic-ui

我正在试图弄清楚滚动时如何保持桌面可见。这个语义ui中有一个设置吗?或者我只需要使用非语义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>

5 个答案:

答案 0 :(得分:12)

我用position: sticky解决了这个问题,

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

答案 1 :(得分:1)

正如@Stewartside建议的那样,这不是当前内置于语义UI中的,但它已经discussed

答案 2 :(得分:0)

虽然我不推荐它,如果你真的希望它能够在黑客中工作,这应该对你有用:

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

答案 3 :(得分:0)

这个脚本可能会为你完成这项工作。只需添加类&#34;粘贴&#34;到您的表格标签并调整顶部的偏移量:

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

答案 4 :(得分:-1)

看看这个JSFiddle,我认为这是你正在寻找的东西..具体来看看thead标签的CSS。

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