Creating a Scrollable HTML Table with Full-Width Design

Introduction

Designing web pages often requires handling large datasets within tables, and making them scrollable enhances user experience without overwhelming the viewport. This guide will walk you through creating an HTML table that spans 100% of its container’s width while implementing a vertical scroll inside the <tbody> element. We’ll explore techniques for both fixed-width and fluid layouts using pure CSS approaches, ensuring compatibility across modern browsers.

Understanding the Structure

An HTML table consists of three primary elements: <table>, <thead>, and <tbody>. For our purpose:

• <table>: The container for the entire table.
• <thead>: Holds column headers.
• <tbody>: Contains the actual data rows.

The challenge is to make only the <tbody> scrollable while keeping <thead> fixed at its position, maintaining alignment and readability across all viewport sizes.

Fixed Width Table with Scrollable TBody

HTML Structure

<table>
  <thead>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
      <th>Head 3</th>
      <th>Head 4</th>
      <th>Head 5</th>
    </tr>
  </thead>
  <tbody>
    <!-- Multiple rows of data -->
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
    </tr>
    <!-- Repeat rows as needed -->
  </tbody>
</table>

CSS for Fixed Width

To implement a fixed-width table with scrollable <tbody>:

table {
  width: 716px; /* Sum of column widths + scrollbar */
  border-spacing: 0;
}

thead, tbody tr { 
  display: block;
}

tbody {
  height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}

tbody td, thead th {
  width: 140px; /* Width per column */
}

thead th:last-child {
  width: 156px; /* Last column includes scrollbar width */
}

Fluid Table with Scrollable TBody

CSS for Full-Width Design

For a table that adapts to its container’s width, using the CSS calc() function:

table {
  width: 100%;
  border-spacing: 0;
}

thead, tbody, tr, th, td { 
  display: block;
}

thead tr {
  width: 97%; /* Fallback */
  width: -webkit-calc(100% - 16px); /* Adjust for scrollbar */
  width:    -moz-calc(100% - 16px);
  width:         calc(100% - 16px);
}

tr:after {  
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
}

tbody {
  height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}

tbody td, thead th {
  width: 19%; /* Slightly less than equal division */
  float: left;
}

Considerations

• Content Length: Ensure cell content doesn’t break across multiple lines to maintain column alignment.
• Responsive Design: Test across devices for consistent behavior.

Conclusion

By following these techniques, you can effectively design a scrollable table that maintains its structural integrity while fitting seamlessly into varying viewport dimensions. These solutions leverage modern CSS capabilities and are compatible with most browsers, ensuring broad accessibility and usability in your web projects.