HTML table floating header without using fixed height and overflow-y

Question

All the examples I saw with table and fixed header are using css

tbody {
  height: 120px;
  overflow-y: auto;
}

This creates double vertical scrollbars. One is from the browser itself, the other one is from the table. If a page just has one table of width:100%, this double scroll bar is very ugly and not responsive. Is there another way to do this without setting the tbody height so that only the body rows are scrolled off the screen, the table header row is always visible and only one vertical scrollbar in the browser?

Your code snippet looks blank to me. Are you missing the HTML? Sidenote: if they're like me, a developers' eyes start to glaze over as soon as they see table and responsive in the same question. — swinn
– swinn, Commented Feb 27, 2017 at 23:50
That browser scrollbar is inevitable if the document is larger than the screen's height. I still have a question: is there any other content (skip header / navigation / sidebanners / footer) than the table on the document? If so, you have two options: (1) a table body with scrollbar (which indicates that there are more items) or (2) a table body without scroll bar. Here, it's just " prepare for a large page if there is lots of table data ! ". If not, just don't use overflow? — KarelG
– KarelG, Commented Feb 28, 2017 at 10:38

Brad · Accepted Answer · 2017-08-30 07:19:47Z

2

As has been mentioned, using table and responsive design do not go hand in hand. I have tried many plugins to solve this but none really to it very well.

But in answer to the scroll bar question, you can use the position:sticky; to make the table header stay on the screen as you scroll through the table vertically.

I hope i understood the question correctly:

header,footer {
  height: 50px;
  width: 100%;
  background: #333;
  color: #fff;
  text-align: center;
}

#spacer {
  height: 500px;
  width: 100%;
  background: #eee;
}

table {
  width: 100%;
  text-align: center;
}
table td {
  border:1px solid #333;
  padding: 30px 0px;
}
table tr:first-child th {
  position:sticky;
  top:0px;
  background: #333;

}
table tr:first-child th {
  color: #fff;
  padding: 20px 0px;
}

<header><h1>Scroll Down</h1></header>
<div id="spacer"></div>
<table>
  <tr>
    <th>Column One</th>
    <th>Column Two</th>
    <th>Column Three</th>
    <th>Column Four</th>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
</table>

<div id="spacer"></div>
<div id="spacer"></div>
<footer><h1>The End</h1></footer>

edited Aug 30, 2017 at 7:19

answered Feb 28, 2017 at 11:18

Brad

8,80811 gold badges48 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

brezotom Over a year ago

There's nothing sticky about this. Does the solution not work in Chrome?

Shawn Over a year ago

@brezotom Only on <th> elements as of this writing accoring to caniuse.com (caniuse.com/#search=position%3Asticky)

Brad Over a year ago

@Shawn thanks, not sure why this did work before but i have fixed now. table tr:first-child th {

Luc · Accepted Answer · 2022-09-20 05:39:36Z

1

Minimal example:

th {
    top: 0px;
    position: sticky;
    background-color: white; /*make header row opaque*/
}

Now just use your <table> as normal and the <th> row sticks to the top of the page while scrolling through the table:

<table>
    <tr><th>...</th></tr>

    <tr><td>...</td></tr>
    <tr><td>...</td></tr>
    <tr><td>...</td></tr>
</table>

Tested in a few browsers including mobile Safari and mobile Firefox and to my surprise it just works reliably everywhere for once.

answered Sep 20, 2022 at 5:39

Luc

6,2613 gold badges51 silver badges57 bronze badges

Collectives™ on Stack Overflow

HTML table floating header without using fixed height and overflow-y

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related