CODEWITHSUNDEEP
htmlcsshtml-table
user266909
user266909

Reputation: 1873

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

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?

Upvotes: 3

Views: 5092

Answers (2)

Luc
Luc

Reputation: 6026

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.

Upvotes: 1

Brad
Brad

Reputation: 8698

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>

Upvotes: 2

Related Questions