Absolute table header for the generated table

Question

I am generating tables with jquery / javascript when I receive an ajax request. I don’t know in advance how wide the columns will be and how many columns I will have.

This leads me to the problem: is it possible to create an absolute table header with pure css, although the width of the columns is unknown?

I tried several js-solutions, such as floatThead , which work very well with small tables, but as soon as I have too many columns, the script slows down the browser until the moment the page is unusable.

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>

Hide result

, position: absolute position: fixed. , , . IE 10+ - pointer-events: none. , 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>

Hide result