Html table with 100% width, with vertical scroll inside tbody

html

responsive-design

css

accessibility

byAnton Shumikhin·Jan 13, 2025

The purpose here is to give our table a 100% width, keep the headers and footers in place, and make the body vertically scrollable. This calls for some CSS magic on tbody, thead, and tfoot. Below is simplified CSS that does just that:

<style>
  thead, tbody, tfoot { 
    /* Magic rule 1: making our table's children block instead of their natural table-row-group */
    display: block; 
  }
  tbody {
    /* Magic rule 2: defining the height of our scrolling area */
    max-height: 150px; /* Be creative with this value */
    /* Magic rule 3: adding the scrolling ability */
    overflow-y: scroll;
  }
  table { width: 100%; /*Remember, power is nothing without control*/ }
</style>

<table>
  <thead>
    <!-- headers -  like a nice and steady tortoise, they keep their pace -->
  </thead>
  <tbody>
    <!-- content - like a restless hare, they race to the finish line -->
  </tbody>
  <tfoot>
    <!-- footers - joining the tortoise in keeping calm -->
  </tfoot>
</table>

Voila! A full-width table with scrollable tbody is ready, and headers and footers are kept intact.

Perfecting column alignment

By defining display: block; for tbody, maintaining thead and tbody column alignment can be a tricky task. Here's where the fluid layout steps in. Use % for column widths and align thead and tbody columns dynamically. CSS calc() function can be your friend to accommodate the vertical scrollbar:

th, td { 
  /* Rule number 42: Always leave room for the scrollbar */
  width: calc(25% - 0.9em); /* Replace 25% according to your needs */ 
}

Keep in mind, scrollbar widths can differ across browsers, so it's a good idea to test how your table performs in each one of them. It's like an audition for browsers where you're the cutthroat judge. IE11 attendees may require JavaScript chaperones to handle this nerve-wracking audition.

Keeping table headers on top

Locking the position of our thead to the top while the tbody ferociously scrolls is the next task on our list. Use position: sticky; and top: 0; right here:

thead th {
  /* Freeze! You have the right to remain on top! */
  position: sticky;
  top: 0;
  /* Invisible turtles are not cool. Let's give it a solid background. */
  background: #FFF;
}

Accompanied by the rule above, our headers will sit back, sip some tea, and watch the body content scroll by. They deserve it after carrying all those column names.

Remember to make th and td elements padding keep in harmony, just like a lovely couple waltzing around the dance floor.

The cross-browser performance race

Browsers play a key role in formatting the scrollable tbody. Some contestants like JavaScript plugins might seem gaudy at first, but they promise a full-fledged and reliable solution. They can get a bit loud sometimes, so if you're a minimalist, go for the lean solution like the one discussed here.

If you foresee a surge of lengthy content in your table cells, it's time to play white-space: nowrap; get-out-of-jail-free card to prevent your layout from pandemonium.

Designing for all screens and users

The table with scrollable tbody needs to look its best on all screens. Consider horizontal scrolling or stacking cells vertically for smaller screens. Modify your tailor-made CSS for responsive tables:

@media screen and (max-width: 768px) {
  /* Introducing mobile-ready tables...Now, that's a blockbuster! */
  thead, tbody, tfoot, tr, td, th { display: block; }
  tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
  }
  th {
    padding: .625em .625em .625em 0;
    text-align: left;
  }
}

Designing for everyone also means considering accessibility. Ensure you use relevant scope attributes (scope="col" or scope="row") for headers and provide appropriate text alternatives for screen readers.

Exploring further frontiers

Sometimes basic table functions are not enough. One may need advanced features like sorting and filtering. Plugins and libraries like React Table come into the picture to extend basic HTML tables. Your JavaScript skills can also shine here for creating custom solutions to enhance table functionalities. After all, if you got it, flaunt it!

explain-codes / Html / Html table with 100% width, with vertical scroll inside tbody

Linked

Using CSS td width absolute, position



How to set tbody height with overflow scroll



Div with horizontal scrolling only



I want to align the text in a <td> to the top



Css: how do I create a gap between rows in a table?

