Search code examples
csshtml-tablesticky

Sticky table head with css

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?

Solution

  • 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