防止表格标题垂直滚动（在 IE 11 中工作）

Question

我在我的 Windows 应用程序中一直使用 IE 11 作为渲染引擎。我知道有很多示例如何防止表格标题垂直滚动，但我似乎无法让它们在 IE 中工作。有什么办法让它在那里工作吗？

这是我用于表格的 HTML 示例：

<table width='100%' border='0' cellpadding='0' cellspacing='0'>
 <thead>
  <tr>
   <th scope='col'>Col 1</th>
   <th scope='col'>Col 2</th>
   <th scope='col'>Col 3</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>---</td>
   <td>---</td>
   <td>---</td>
   <td>---</td>
  </tr>
  <tr>
   <td>+++</td>
   <td>+++</td>
   <td>+++</td>
   <td>+++</td>
  </tr>
 </tbody>
</table>

我需要确保thead 保持在表格顶部，无论其中的行列表有多长。

Answer 1

我搜索了类似的线程，发现this solution 在 IE 11 中有效。它使用另一个具有固定位置的表格在滚动时在页面顶部显示标题。

您可以参考下面的示例代码。它在 IE 11 中运行良好：

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead");
var $fixedHeader = $("#header-fixed").append($header.clone());

$(window).bind("scroll", function() {
  var offset = $(this).scrollTop();

  if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
    $fixedHeader.show();

    $.each($header.find('tr > th'), function(ind, val) {
      var original_width = $(val).width();
      $($fixedHeader.find('tr > th')[ind]).width(original_width);
    });
  } else if (offset < tableOffset) {
    $fixedHeader.hide();
  }
});

#header-fixed {
  position: fixed;
  top: 0px;
  display: none;
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table width='100%' border='0' cellpadding='0' cellspacing='0' id="table-1">
  <thead>
    <tr>
      <th scope='col'>Col 1</th>
      <th scope='col'>Col 2</th>
      <th scope='col'>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
  </tbody>
</table>
<table id="header-fixed"></table>

Answer 2

因此，您可以做的是为表格本身分配一个相对位置，然后将 position:sticky 值应用于表格头类。

这里有一篇文章，我觉得也可以提供更多的价值https://css-tricks.com/position-sticky-and-table-headers/

将来，如果我们能看到您正在使用的 CSS 也会有所帮助；这样我们就可以让您知道您是否走在正确的轨道上。