javascript - 生成表的绝对表头

Question

我在从 ajax 请求中获取时使用 jquery/javascript 生成表。我事先不知道列的宽度以及我将拥有多少列。

这让我直面问题:即使列宽未知，是否仍然可以使用纯 css 创建绝对表头？

我尝试了一些 js 解决方案，例如 floatThead ，它非常适合小表格，但一旦我得到太多列，脚本就会严重降低浏览器速度，直到页面无法使用。

Answer 1

Javascript 是最好的解决方案，特别是因为没有对 position: sticky 的广泛支持，标题将始终固定在视口(viewport)中，不能包含在表格元素内。您还可以使用 clip 属性将表头隐藏在表格之外，但支持也有限。

但如果您坚持使用 CSS，我能想到的唯一解决方案是复制整个表格(这应该很容易，因为它已经动态生成。)修复第二个表格，将其向上移动 100%，并隐藏除表头。

table:nth-of-type(even) {
  position: fixed;
  transform: translate3d(0,-100%,0);
}
table:nth-of-type(even) tbody:not(thead) * {
  visibility: hidden;
}

body {
  min-height: 800px;
}
td {
  min-width: 50px;
  height: 100px;
  border: 1px solid black;
}
table:not(:nth-of-type(even)) thead {
  visibility: hidden;
}
table:nth-of-type(even) {
  position: fixed;
  transform: translate3d(0,-100%,0);
}
table:nth-of-type(even) thead tr {
  background: green;
}
table:nth-of-type(even) tbody:not(thead) * {
  visibility: hidden;
}
.clip-wrapper {
  position: absolute;
  clip: rect(0, auto, auto, 0);
}

<div class="clip-wrapper">
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tr>
    <td></td>
    <td>This is a test column to make it wider</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table><table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tr>
    <td></td>
    <td>This is a test column to make it wider</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
</div>

这是使用容器的第二个代码段，以便拥有 position: absolute header 而不是 position: fixed。此方法需要一个滚动框表，但允许您将其放置在页面上的任何位置，因为它都包含在内。由于 pointer-events: none，支持 IE 10+。如果您在标题上设置了高度，则可以将第二个表的高度设置为标题的高度，第二个表上的 overflow:hidden 和 display:block 以获得更多广泛支持的方法。这是因为第二个表位于滚动包装器的前面，阻止您滚动。

.container {
  position: relative;
  float: left;
}
.scroll-wrapper {
  position: relative;
  max-height: 100%;
  max-height: 100vh;
  height: 200px;
  overflow: scroll;
  border: 1px solid black;
}
td {
  min-width: 50px;
  height: 100px;
  border: 1px solid black;
}
.scroll-wrapper table thead {
  visibility: hidden;
}
.scroll-wrapper + table {
  position: absolute;
  top: 0;
  pointer-events: none;
}
.scroll-wrapper + table thead tr {
  background: green;
}
.scroll-wrapper + table tbody:not(thead) * {
  visibility: hidden;
}

<div class="container">
  <div class="scroll-wrapper">
    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tr>
        <td></td>
        <td>This is a test column to make it wider</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div>
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tr>
      <td></td>
      <td>This is a test column to make it wider</td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>