Sticky table head with css

Question

Currently I am using the following html + css to get my sticky table head:

<html>
<body>
  <table class="table table-striped" style="display: block;">
      <thead style="position: sticky;top:6.833rem;; background-color: #e5e5e5;z-index: 10;">
          <tr>
              <th>Heading 1</th>
              <th>Long Heading  </th>
              <th>Heading 2</th>
              <th>Very Very Very Very Long Heading</th>
              <th>Very Long Heading</th>
          </tr>
      </thead>
      <tbody style="table-layout: fixed;">
          <tr>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
          </tr>
      </tbody>
  </table>
</body>
</html>

This works totally fine in Firefox. But when I run the same code in Chrome, the thead isn't sticky anymore.

If I add

display: block;

to the style it works, but then my headings and my content columns aren't the same width anymore.

Any suggestions?

Willem van der Veen · Answer 1 · 2018-07-25T13:58:38.490

This should clearly illustrate how to use sticky. Maybe you have to adjust the sizes to your needs. I also put in a fill div between for illustration purposes.

table {
  top: 50px;
  position: sticky;
  background-color: #e5e5e5;
}

body{
  height: 2000px;
}

#fill{
  height: 150px;
  width: 100%;
}

 <div id="fill"></div>
  <table>
      <thead >
          <tr>
              <th>Heading 1</th>
              <th>Long Heading  </th>
              <th>Heading 2</th>
              <th>Very Very Very Very Long Heading</th>
              <th>Very Long Heading</th>
          </tr>
      </thead>
      <tbody style="table-layout: fixed;">
          <tr>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
          </tr>
      </tbody>
  </table>

Note that I gave the body an height to show that it will stick when you scroll.

The problem with fixed is, I dont want the thead to be fixed. It should scroll until I reach the point where it should stay (6.833rem from top). That works with my solution, but only in firefox. — Sharivari, Jul 25 '18 at 13:44

score 0 · Accepted Answer · answered Jul 25 '18 at 14:13

0

I found the solution.

Chrome doesnt support sticky for thead/thr. So I moved the whole styling to each th element. Thats everything.

Found the solution here: CSS-Only Sticky Table Headers In Chrome

answered Jul 25 '18 at 14:13

Sharivari

103
9

Sticky table head with css

2 Answers2