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

Question

我正在研究如何在滚动时保持 table 头部可见。是否有语义 ui 的设置？还是我只需要使用非语义 ui 解决方案？

您需要查看 "Full page" 才能正确查看 table。

<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

查看此 JSFiddle，我认为这就是您正在寻找的东西..具体查看 CSS 的 thead 标记。

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

Answer 2

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

Answer 3

虽然我不推荐它，但如果你真的真的希望它即使有 hack 也能工作，这应该适合你：

<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

此脚本可能会为您完成这项工作。只需将 class "sticky" 添加到您的 table 标签并调整距顶部的偏移量：

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

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

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

Answer 6

将 Ashkan 的解决方案应用于任何 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>

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

Semantic UI - Keep thead visible when scrolling tbody

html

css

semantic-ui