javascript – 生成的表的绝对表头

2023年12月25日 124次阅读

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

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

我尝试了一些像floatThead这样的js解决方案,这些解决方案适用于小型表,但是当我得到太多列时,脚本会严重降低浏览器的速度,直至页面无法使用.

最佳答案 Javascript是最好的解决方案,特别是因为没有广泛的位置支持：粘贴标题将始终固定在视口中,并且不能包含在表元素中.您还可以使用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>

这是第二个使用容器以获得位置的片段：绝对头而不是位置：固定.此方法需要一个滚动条表,但允许您将其放在页面上的任何位置,因为它全部包含在内.因为指针事件支持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>
点赞