Question

我正在试图弄清楚滚动时如何保持桌面可见。这个语义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>

Answer 1

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

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

Answer 2

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

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

这个脚本可能会为你完成这项工作。只需添加类＆＃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});
        }
    };
});

Answer 5

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

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

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

5 个答案: