生成的表

Question

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

这使我正确地解决了这个问题：是否仍然可以使用纯css创建绝对表头，即使列的宽度未知？

我尝试了一些像floatThead这样的js解决方案，这些解决方案适用于小型表，但是当我得到太多列时，脚本会大大减慢浏览器的速度，直到页面无法使用的地方。

Answer 1

Javascript是最好的解决方案，特别是因为没有对position: sticky的广泛支持，标题将始终在视口中修复，并且不能包含在表元素中。您还可以使用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标头而不是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>