Setting table column width

Widths by proportion

To achieve a harmonious layout, set column width using percentages. For a responsive email table, you could assign a 15% width to both "From" and "Date" columns and a 70% width to the "Subject" column:

<table style="width: 100%; /* Making sure this table's flirting with the edges */">
  <colgroup>
    <col style="width: 15%;">
    <col style="width: 15%;">
    <col style="width: 70%;">
  </colgroup>
  <!-- table rows -->
</table>


This arrangement ensures your table is using the complete page width (range anxiety no more!) and your columns are looking perfect in proportion.

Responsive column width via CSS

Present a table that looks stylish on any device with the use of both media queries and relative units:

@media (max-width: 600px) {
  col {
    width: auto; /* Browser plays Tetris now and rearranges column widths as needed */
  }
}


Leverage CSS classes for uniform styling across your columns:

.col-header {
  background-color: #f4f4f4; /* Because "go brighter!" said no designer ever */
}

<table>
  <colgroup>
    <col class="col-header" style="width: 25%;">
    <col class="col-header" style="width: 75%;">
  </colgroup>
  <!-- table rows -->
</table>


Try flirting with the property of table-layout: fixed in CSS to assure consistent column widths disregarding cell content.

Column width management with span attribute

Call upon the span attribute in the <col> tag to manage width proportions across multiple columns:

<table style="width: 100%; /* Making its presence felt */">
  <colgroup>
    <col span="2" style="width: 25%;"> <!-- Applying to first two kids in line -->
    <col style="width: 50%;">
  </colgroup>
  <!-- table rows -->
</table>


Play with table-layout property

Adopt the table-layout: fixed property for a sleeker, more robust layout:

.table-fixed {
  table-layout: fixed; /* Who likes surprises anyway? */
}


<table class="table-fixed" style="width: 100%;">
  <!-- columns and rows -->
</table>


This is particularly helpful if your cell contents tend to have a diva moment and vary dramatically in length across different rows.

Optimal table design

Remember visualization when setting column widths:

1. Evaluate the relevance of your content - the meatier columns can afford more space.
2. Keep it readable: squinting isn't a cool look.
3. Sidestep horizontal scrolling: its fans are few and far between.

Browser compatibility checks

Ensure your column width design sits well with all browsers. Bear in mind you might need to factor in some older browsers, like IE7 or IE9+, which could have specific needs and not be in sync with more modern CSS grid layout strategies.