{"id":292192,"date":"2019-07-12T15:31:21","date_gmt":"2019-07-12T22:31:21","guid":{"rendered":"http:\/\/css-tricks.com\/?p=292192"},"modified":"2020-03-05T06:24:58","modified_gmt":"2020-03-05T13:24:58","slug":"position-sticky-and-table-headers","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/position-sticky-and-table-headers\/","title":{"rendered":"Position Sticky and Table Headers"},"content":{"rendered":"<p>You can&#8217;t <code>position: sticky;<\/code> a <code>&lt;thead&gt;<\/code>. Nor a <code>&lt;tr&gt;<\/code>. But you can sticky a <code>&lt;th&gt;<\/code>, which means you <em>can<\/em> make sticky headers inside a regular ol&#8217; <code>&lt;table&gt;<\/code>. This is tricky stuff, because if you didn&#8217;t know this weird quirk, it would be hard to blame you. It makes way more sense to sticky a parent element like the table header rather than each individual element in a row. <\/p>\n<p><!--more--><\/p>\n<p>The issue boils down to the fact that stickiness requires <code>position: relative<\/code> to work and that <a href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=702927#c1\" rel=\"noopener\">doesn&#8217;t apply to <code>&lt;thead&gt;<\/code> and <code>&lt;tr&gt;<\/code><\/a> in the CSS 2.1 spec. <\/p>\n<p>There are two very extreme reactions to this, should you need to implement sticky table headers and not be aware of the <code>&lt;th&gt;<\/code> workaround. <\/p>\n<ul>\n<li><strong>Don&#8217;t use table markup at all.<\/strong> Instead, use different elements (<code>&lt;div&gt;<\/code>s and whatnot) and other CSS layout methods to replicate the style of a table, but not locked out of using <code>position: relative<\/code> and creating <code>position: sticky<\/code> parent elements.<\/li>\n<li><strong>Use table elements<\/strong>, but totally remove all their styling defaults with new <code>display<\/code> values.<\/li>\n<\/ul>\n<p>The first is dangerous because you aren&#8217;t using semantic and accessible elements for the content to be read and navigated. The second is almost the same. You can go that route, but need to <a href=\"https:\/\/developer.paciellogroup.com\/blog\/2018\/03\/short-note-on-what-css-display-properties-do-to-table-semantics\/\" rel=\"noopener\">be really careful to re-apply semantic<\/a> roles. <\/p>\n<p>Anyway, none of that matters if you just stick (get it?!) to using a <code>sticky<\/code> value on those <code>&lt;th&gt;<\/code> elements. <\/p>\n<p class=\"codepen\" data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"css,result\" data-user=\"chriscoyier\" data-slug-hash=\"PrJdxb\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Sticky Table Headers with CSS\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/PrJdxb\/\" rel=\"noopener\"><br \/>\n  Sticky Table Headers with CSS<\/a> by Chris Coyier  (<a href=\"https:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<p class=\"explanation\">It&#8217;s probably a bit weird to have table headers as a row in the middle of a table, but it&#8217;s just illustrating the idea. I was imagining colored header bars separating players on different sports teams or something.<\/p>\n<p>Anytime I think about data tables, I also think about how tricky it can be to make them responsive. Fortunately, <a href=\"https:\/\/css-tricks.com\/accessible-simple-responsive-tables\/\">there are a variety of ways<\/a>, all depending on the best way to group and explore the data in them.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can&#8217;t position: sticky; a &lt;thead&gt;&lt;\/thead&gt;. Nor a &lt;tr&gt;&lt;\/tr&gt;. But you can sticky a &lt;th&gt;&lt;\/th&gt;, which means you can make sticky headers inside a regular ol&#8217; &lt;table&gt;&lt;\/table&gt;. This is tricky stuff, because if you didn&#8217;t know this weird quirk, it would be hard to blame you. It makes way more sense to sticky a parent [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":292600,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1300,651],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/table-pattern.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":283534,"url":"https:\/\/css-tricks.com\/dealing-with-overflow-and-position-sticky\/","url_meta":{"origin":292192,"position":0},"title":"Dealing with overflow and position: sticky;","date":"February 25, 2019","format":false,"excerpt":"Any overflow value other than visible and no height is the enemy of child elements with position: sticky;. It's like that element is ready to stick when the parent scrolls, but it never does because the height is unconstrained. Adding a fixed height can solve the issue, but that's not\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/sticky-calendar.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":342294,"url":"https:\/\/css-tricks.com\/making-tables-with-sticky-header-and-footers-got-a-bit-easier\/","url_meta":{"origin":292192,"position":1},"title":"Making Tables With Sticky Header and Footers Got a Bit Easier","date":"June 14, 2021","format":false,"excerpt":"It wasn't long ago when I looked at sticky headers and footers in HTML <table>s in the blog post A table with both a sticky header and a sticky first\u00a0column. In it, I never used position: sticky on any <thead>, <tfoot>, or <tr> element, because even though Safari and Firefox\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/Screen-Capture-on-2021-06-15-at-06-45-53.gif?fit=1200%2C674&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333880,"url":"https:\/\/css-tricks.com\/a-table-with-both-a-sticky-header-and-a-sticky-first-column\/","url_meta":{"origin":292192,"position":2},"title":"A table with both a sticky header and a sticky first column","date":"February 9, 2021","format":false,"excerpt":"We've covered that individual <table> cells, <th> and <td> can be position: sticky. It's pretty easy to make the header of a table stick to the top of the screen while scrolling through a bunch or rows (like this demo). But stickiness isn't just for the top of the screen,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/table-mlb-teams.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":338846,"url":"https:\/\/css-tricks.com\/sticky-headers-5-ways-to-make-them-better\/","url_meta":{"origin":292192,"position":3},"title":"Sticky Headers: 5 Ways to Make Them Better","date":"April 21, 2021","format":false,"excerpt":"Page Laubheimer says that if you're going to do a sticky header... Keep it small.Visually contrast it with the rest of the page.If it's going to move, keep it minimal. (I'd say, respect prefers-reduced-motion.)Consider \"partially persistent headers.\" (Jemima Abu calls it a Smart Navbar.)Actually, maybe don't even do it. I\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/sticky-header.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":282104,"url":"https:\/\/css-tricks.com\/more-like-position-tricky\/","url_meta":{"origin":292192,"position":4},"title":"More Like position: tricky;","date":"February 4, 2019","format":false,"excerpt":"I rather like position: sticky;. It has practical use cases. I think of things like keeping a table of contents in a sidebar of a long article, but as a fairly simple implementation and without risk of overlapping things in awkward ways. But Elad Shechter is right here: it's not\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/elad-shechter-sticky-monster-1.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":262902,"url":"https:\/\/css-tricks.com\/idea-simple-responsive-spreadsheet\/","url_meta":{"origin":292192,"position":5},"title":"An Idea for a Simple Responsive Spreadsheet","date":"November 28, 2017","format":false,"excerpt":"How do you make a spreadsheet-like interface responsive without the use of any JavaScript? This is the question I've been asking myself all week as I've been working on a new project and trying to figure out how to make the simplest spreadsheet possible. I wanted to avoid using a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/table-pattern.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292192"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=292192"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292192\/revisions"}],"predecessor-version":[{"id":304726,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/292192\/revisions\/304726"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/292600"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=292192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=292192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=292192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}