CODEWITHSUNDEEP
htmlcsscss-tables
t_m27
t_m27

Reputation: 133

Prevent table body from going beyond visible height of screen then add scrollbar

I have a table on a page. Sometimes it will have 10 rows, and other times it will have over 100 rows. I'd like the table to go all the way down to the bottom of the screen if there are enough rows but not past that. I want it to add a scrollbar for just the tbody if there are enough rows to go beyond the height of the screen. I don't want a scrollbar for the page just the tbody if necessary. I also want the thead to always be visible at the top.

Here is a jsFiddle http://jsfiddle.net/65o2bxfy/ This is mostly what I want, but I'd like it to fill to the bottom and always have the thead visible.

I also have to use table-layout: fixed on my table so that column widths are the right size.

In other places I have seen this code, but it won't work for me because I don't know the height in advance just that I want it to fill up the screen.

table {
  height: 300px;
  display: block;
  overflow-y: scroll;
}


table {
  height: 300px;
  display: block;
  overflow-y: scroll;
}
<div>
<div></div>
<div><table>
<thead>
  <tr>
    <th>COL 1</th>
    <th>COL 2</th>
    <th>COL 3</th>
    <th>COL 4</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>
    <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>
    <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>
    <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>
</tbody>
</table></div>
</div>

Thanks!

Upvotes: 0

Views: 1111

Answers (1)

Ciaran Wood
Ciaran Wood

Reputation: 38

Use CSS viewport units. 1 vh connotes 1/100th of the height of your viewport (same with vw for width). min-height: 100vh should do the trick.

table {
  min-height: 100vh;
  display: block;
  overflow-y: scroll;
}

Browser support is good for it too https://caniuse.com/#feat=viewport-units

However, this solution only works if you have no other elements on your page and you're happy for it to sit at 100% tall. You could use calc() to offset the difference from other elements heights but then you're relying on those elements to have fixed heights.

If you're able to provide me more context as to where you want your tables to sit on your page I may be able to help you out a bit better.

To keep your the header of your table sticky set the th cells with a position of sticky.

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

Browser support is more sparse for that but good enough for production.

https://caniuse.com/#search=sticky

Upvotes: 1

Related Questions