Freeze the top row for an html table only (Fixed Table Header Scrolling)

by

I know this has several answers, but none of these really helped me. I found [this article][1] which explains why my sticky wasn’t operating as expected.

Basically, you cannot use position: sticky; on <thead> or <tr> elements. However, they can be used on <th>.

The minimum code I needed to make it work is as follows:

table {
  text-align: left;
  position: relative;
}

th {
  background: white;
  position: sticky;
  top: 0;
}

With the table set to relative the <th> can be set to sticky, with the top at 0
[1]: https://css-tricks.com/position-sticky-and-table-headers/

NOTE: It’s necessary to wrap the table with a div with max-height:

<div id="managerTable" >
...
</div>

where:

#managerTable {
    max-height: 500px;
    overflow: auto;
}

More Related Contents:

  1. Applying an ellipsis to multiline text [duplicate]
  2. CSS Progress Circle
  3. How to fallback to local stylesheet (not script) if CDN fails
  4. Using CSS :before and :after pseudo-elements with inline CSS?
  5. Make a div fill up the remaining width
  6. How to make fill height
  7. Highlight label if checkbox is checked
  8. Tools to selectively Copy HTML+CSS+JS From A Specific Element of DOM [closed]
  9. White space at top of page
  10. How to apply two CSS classes to a single element
  11. Why does percentage padding break my flex item?
  12. How does the vertical-align property work?
  13. Why are dashes preferred for CSS selectors / HTML attributes?
  14. Style not working for innerHTML in Angular [duplicate]
  15. Table tbody scroll in IE8
  16. How to Set Height for the Drop Down of Select box
  17. How can I prevent the scrollbar overlaying content in IE10?
  18. How to center-align one flex item and right-align another using Flexbox [duplicate]
  19. When I try to shift the image upwards using negative margin the whole container is moved upwards
  20. How to center image horizontally within a div element?
  21. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  22. What’s the difference between HTML’s and CSS’s width attribute?
  23. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  24. How do I make flex box work in safari?
  25. Zebra striping a flexbox table with wrapping items
  26. Bootstrap row and col explanation
  27. How to make a flex item not fill the height of the flex container? [duplicate]
  28. Complete list of reasons why a css file might not be working
  29. What is HTML’s tag default display type?
  30. How to create a heart shape using CSS?

Leave a Comment