Setting fixed width for HTML table columns regardless of cell content size

Your toolbox

The use of colgroup and col tags

Precisely define individual column widths by utilising the <colgroup> and <col> tags:

<table>
  <colgroup>
    <col style="width:100px">
    <col style="width:150px">
    <col style="width:200px">
  </colgroup>
  <!-- Table rows and cells go next -->
</table>


This approach provides a segregated structure for width definitions, separate from the table body.

Consider the div wrapper technique

Avoid overflowing issues by insulating your cell content within a div and assigning it a fixed width:

<td>
  <!-- This div contains Infinity Stones... I mean, text -->
  <div style="width: 100px; overflow: hidden; text-overflow: ellipsis;">Lots of text here</div>
</td>


Set maximum and minimum widths

You can lock cell width within a range, using the min-width and max-width properties, even with dynamic content.

th, td {
  /* I ain't moving, pal! */
  min-width: 100px; max-width: 100px; overflow: hidden; 
}


Tricks of the trade

Improving visibility with cell borders

To emphasize individual cells and improve readability, consider adding border properties to th or td.

th, td { border: 1px solid #ccc; }


Handling content overload

For cells with excessive content, encapsulating the content within a div can be useful:

<td>
  <!-- This div scroll is brought to you by the letter 'Y' -->
  <div style="max-height: 100px; overflow-y: auto;">Lots of text...</div>
</td>


Fluid design with percentage widths

For flexible layouts, consider applying percentage-based widths on col elements:

<colgroup>
   <!-- What's your share of the pie? -->
  <col style="width:30%">
  <col style="width:70%">
</colgroup>


Embrace the GEM principle

Remember to apply the Graphics, Emphasis, and Minimalism (GEM) principles while truncating text, and maintain a clean layout.

Averting common nightmare scenarios

Managing variances in content sizes

Wide disparities in content sizes can make some cells appear empty while some look bursting at the seams. Including icons or smaller images with smaller content can provide a filler while preserving visual appeal.

Maintaining harmony with page width

What if your table is too wide or too thin for the page? A quick fix can be assigning an explicit table width in CSS and allowing the content to adjust accordingly.

table { width: 600px; /* Holy-width, Batman! */ }


Dealing with lengthy cell content

Every so often, you'll have more text than can fit into the cell. Various solutions can "hide the dead body", including hiding the overflow, enabling scroll bars, or creating a click-to-expand function that reveals the rest of the content.