Equal sized table cells to fill the entire width of the containing table

html

responsive-design

css

table-layout

byAnton Shumikhin·Oct 11, 2024

Get equal-sized table cells across the table width with CSS. One style rule: table { width: 100%; table-layout: fixed; } should be applied on your table. Then, define cells (<td>) absent width; the CSS's table-layout: fixed property will do an even distribution of space. Here’s the extract:

<style>
  // Stretches the whole table - no cell left behind.
  table { width: 100%; table-layout: fixed; } 
</style>
<table>
  <tr>
    // Say hello to your perfectly spaced cells. ✌️
    <td>Cell 1</td> 
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

The cells will automatically adjust to an equal width, filling the entire table proportionally.

Table design considerations

When building tables, it's crucial to decide on the layout and responsiveness beforehand. The fast answer provides the structure, and this section will dive into the intricacies:

Fixed vs. auto property: table-layout: auto adjusts cell width as per the content, while table-layout: fixed does an even distribution, ignoring content.
Dimensioning columns: Use width: calc(100%/3) for a three-cell row, proposing proportional width without explicit width declarations.
Aesthetic details: border-collapse: collapse modifies table appearance, doing away with double borders between cells.

Content's influence on cell sizing

Content within cells impacts the cell sizing, but with word-wrap: break-word in play, cells will adjust themselves to differing content and still maintain layout integrity.

td {
  // Goodbye awkward alignments. Hello beautiful table cells! 😎
  text-align: center;
  vertical-align: middle;
  word-wrap: break-word;
}

With these CSS rules in place, your cells will keep their equal width and alignment.

Handling different scenarios

Different table layouts require adaptability. We can examine some deviations where our rules still apply:

Multi-lined content: More extensive data may require multi-lined cells; the CSS should accommodate these scenarios.
Nested tables: If you're dealing with nested tables, remember that parent table styles might affect child tables — style them wisely.
Dynamic content: When working with server-side scripts (like PHP, Ruby, or Python), the tables should adapt to fluctuating content without breaking the layout.

Future-proofing your tables

In responsive designs, always ponder how your table will resize to different viewport sizes. It's vital to use relative sizing, and also to consider grid systems for long-term resolution.

Flexbox/Grid layouts: Use modern layout schemes like Flexbox or CSS Grid when your layout needs more elaborate responsive behaviour.
Media queries: Implement media queries to alter styles for multiple devices.

Responsive Strategies

Here are some practical approaches to ensure your table is responsive and versatile on all devices:

Overflow scrolling: On smaller screens, allow your table to scroll horizontally.
Reflow: Convert table rows into blocks on compact screens for easier vertical scrolling.
Visibility toggles: Only show essential data and provide a provision to toggle visibility of the additional data.