Position sticky on thead

by

Position sticky on thead th works in 2018!

In your stylesheets just add this one line:

thead th { position: sticky; top: 0; }

Your table will need to include thead and th for this to style.

<table>
    <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
            <th>column 4</th>            
        </tr>    
    </thead>
    <tbody>
      // your body code
    </tbody>
</table>

Also, if you have multiple rows in thead, you can select the first one to remain sticky:

thead tr:first-child th { position: sticky; top: 0; }

As of March 2018 support is pretty much there across modern browsers
ref: https://caniuse.com/#feat=css-sticky

Credit goes to @ctf0 for this one (ref comment made 3 Dec 2017)

More Related Contents:

  1. How can I make this background to see full?
  2. How to make an element width: 100% minus padding?
  3. Best way to center a on a page vertically and horizontally? [duplicate]
  4. vertical-align with Bootstrap 3
  5. How to align content of a div to the bottom
  6. With CSS, use “…” for overflowed block of multi-lines
  7. Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
  8. Fix footer to bottom of page
  9. Html/Css Triangle with pseudo elements
  10. Force flex item to span full row width
  11. Removing body margin in CSS
  12. What is quirks mode?
  13. Google Fonts are not rendering on Google Chrome
  14. Color for Unicode Emoji
  15. Using CSS to insert text
  16. Unskewing the ends of an assortment multiple skewed images
  17. How to align two elements on the same line without changing HTML
  18. Scroll to a specific Element Using html
  19. Rounded table corners CSS only
  20. Dual-Color Text
  21. vs. font-weight:bold & vs. font-style:italic
  22. Add border to div increase div width?
  23. CSS Selector “(A or B) and C”?
  24. How to change one element while hovering over another with CSS
  25. How to make CSS Grid items take up remaining space?
  26. CSS/HTML: What is the correct way to make text italic?
  27. CSS Border on PNG image with transparent parts
  28. Prevent ligatures in Safari (Mavericks/iOS7) via CSS
  29. Create tree view with horizontal and vertical lines showing the connectivity using css
  30. How can I get a specific number child using CSS?

Leave a Comment