Force table column widths to always be fixed regardless of contents

html

responsive-design

css

best-practices

byAlex Kataev·Nov 28, 2024

Set the column widths with CSS table-layout: fixed; and define width for <th>/<td>. Content won't stretch columns:

<style>
  /* Set the table layout to fixed and define table width. This is your table's day at the gym, getting ripped 💪 */
  table { 
    table-layout: fixed; 
    width: 300px;  
  }

  /* Set column widths. Imagine they're the biceps. No amount of heavy lifting (i.e. content) will make them bulge out of proportion. */
  th, td { 
    width: 100px;
    overflow: hidden;
  }
</style>

<table>
  <tr><th>Head</th><th>Head</th><th>Head</th></tr>
  <tr><td>Data</td><td>Long Data won't expand (much like your waistline after a diet 😄)</td><td>Data</td></tr>
</table>

Applying table-layout: fixed; sets equal width: 100px; for each cell, overriding content size.

Going modern with table configuration

Ancient HTML attributes may still lurk in your code. But, for web standards stake (and the health of your site), switch to CSS for table dimensions. This means no width attribute on the table:

<!-- Old school, not cool 🧓-->
<table width="300px"></table>

Go modern:

/* The stuff of legends 🎖️ */
table { width: 300px; }

Dealing with content overflow

Despite your best efforts, long texts or images might try to break free from their cells. Luckily, you have word-wrap: break-word; and overflow: hidden;:

td {
  /* Wrap unwieldy text like a soft taco 🌮 */
  word-wrap: break-word; 

  /* Keep them pesky overflowing elements in check! Like shooing geese off your lawn 🦢 */
  overflow: hidden; 
}

Designing fixed tables for the small screens

Want your fixed layout table to play nice with different screens? Use percentages for width:

/* Responsive for the win! 🎉 */
table { width: 100%; }
th, td { width: 33.33%; }

Ensure that the percentages sum up to 100%. Else, your layout might start to look like a Picasso painting (abstract and messy!).

Act upon the cross-browser quirkiness

Just like cats, browsers have personalities too. Test your code in different browsers before launching it into the web wilderness:

- [Check out the live demo on jsFiddle](#)

Being flexible

You're not always stuck with rigid columns. Mix some flexible columns for a hybrid table that's strong and flexible:

table { width: 100%; table-layout: fixed; }
.fixed-width { width: 150px; }
.flexible-width { width: auto; }

In this code, the chef's surprise is the .flexible-width column that adjusts to the display, while the .fixed-width columns stay the same.

Let's be semantic

Prevent div zombies from taking over your table. Container divs in cells can make things complex and stray from good old semantic HTML.

Instead, apply styles to th or td elements. This clause doesn't div-iate from HTML sanity!

Catering to emails

Designing tables for emails is like playing a game on hard mode: email clients can be tricky. Stick to inline styles and expansive CSS. And test, test, and test some more!

Prioritize accessibility

Tables should be accessible to all. Balance fixed column widths and readability. Use appropriate scope for headers and aria roles to make tables usable for assistive technologies.

explain-codes / Html / Force table column widths to always be fixed regardless of contents

Linked

100% width table overflowing div container



Horizontal Scroll on Overflow of Table



How can I limit table column width?



Td widths, not working?



Css table td width - fixed, not flexible

