Sticky table headers within overflow auto inside a grid

Question

Similar questions has been posted, but this is a new take on the problem.

What I know so far

Position sticky does not work inside a parent with overflow
It's possible to "hack" it with javascript but with all the moving parts, it's too much work (overflow positions, sizes etc)

My problem is the context

I use a grid where top and bottom should be fixed and the main should be scrollable
In the main there is a table which may overflow both vertically and horizontally in the future
The th is set to sticky (but does not work because of overflow)
I got around it one time by using a grid with loose elements (no parent), but that got too messy to work with

Question

I prefer a pure css solution
How can I get around it?

https://jsfiddle.net/jw147aqk/1/

You need to resize the window to make the table overflow.

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
}

.wrap {
  background: #eee;
  height: 100%;
  
  display: grid;
  grid-template-rows: 50px 1fr 50px;
  grid-template-areas: "header" "main" "footer";
}

header {
  grid-area: header;
  background: green;
  color: #fff;
}

main {
  overflow-y: auto;
}

footer {
  grid-area: footer;
  background: #ba0000;
  color: #fff;
}

table {
  width: calc(100% - 3px);
  border-collapse: collapse;
}

table th {
  background: #000;
  color: #fff;
  height: 50px;
  position: sticky;
}

table td {
  background: #fff;
  height: 50px;
  border: 1px solid #ccc;
}

<div class="wrap">
  <header>My header</header>
  <main>
    <table>
      <thead>
        <tr>
          <th>Head first</th>
          <th>Head second</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
      </tbody>
    </table>
  </main>
  <footer>Footer</footer>
</div>

@AdamBuchananSmith The question is how I can get around the issues with making my table headings sticky. — Jens Törnell
– Jens Törnell, Commented Jun 5, 2019 at 13:46

sadegh · Accepted Answer · 2019-06-05 14:00:26Z

2

add top: 0; to the table th

table th {
  background: #000;
  color: #fff;
  height: 50px;
  position: sticky;
  top: 0;
}

answered Jun 5, 2019 at 14:00

sadegh

1,6541 gold badge16 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TheUnKnown · Accepted Answer · 2019-06-05 14:01:05Z

Give class name to the <th> that you want to make sticky and use Position:sticky to that class as shown below:

.stickyThis{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
}

.wrap {
  background: #eee;
  height: 100%;
  
  display: grid;
  grid-template-rows: 50px 1fr 50px;
  grid-template-areas: "header" "main" "footer";
}

header {
  grid-area: header;
  background: green;
  color: #fff;
}

main {
  overflow-y: auto;
}

footer {
  grid-area: footer;
  background: #ba0000;
  color: #fff;
}

table {
  width: calc(100% - 3px);
  border-collapse: collapse;
}

table th {
  background: #000;
  color: #fff;
  height: 50px;
  position: sticky;
}

table td {
  background: #fff;
  height: 50px;
  border: 1px solid #ccc;
}

<div class="wrap">
  <header>My header</header>
  <main>
    <table>
      <thead>
        <tr>
          <th class="stickyThis">Head first</th>
          <th class="stickyThis">Head second</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
      </tbody>
    </table>
  </main>
  <footer>Footer</footer>
</div>

Collectives™ on Stack Overflow

Sticky table headers within overflow auto inside a grid

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related