Table with table-layout: fixed; and how to make one column wider

html

responsive-design

css-rules

table-layout

byAnton Shumikhin·Jan 25, 2025

Need a fast way to widen a column in a fixed-layout table? Assign a width directly to a th or td in that column.

<table style="table-layout: fixed;">
  <colgroup>
    <col>
    <col style="width: 200px;"> <!-- Your wider column here, bam! -->
    <col>
  </colgroup>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
  <!-- more rows... -->
</table>

This method increases the width of your chosen column without altering the rest. Simple and clean!

How can auto-width be swerved?

There are circumstances where you'll want to take the wheel from the automatic width distribution. Here, apply CSS rules directly to your column tags inside the colgroup to steer the layout:

<col style="width: 150px;"> <!-- Like driving a compact car in a large spot -->
<col> <!-- The rest of the spots are auto-width -->

This assigns a specific width to the first column and allows the other columns to adapt automatically.

Unpacking the fixed and auto baggage

When you define table-layout: fixed;, you're telling the browser that all column widths are non-negotiable, sort of like an overbooked flight with assigned seating.

table { 
  width: 100%; 
  table-layout: fixed; /* Like a busy airport on holidays */
}

Now, any undeclared columns chill out and take up equal parts of the remaining space in first class.

Respect the nth-child

In situations where more complex styling is needed, the nth-child selector could be your knight in shining armour!

table th:nth-child(2), 
table td:nth-child(2) { 
  width: 200px; // Behold, your wider column!
}

/* Or use class, like naming your favourite child */
.wide {
  width: 200px;
}

These rules target the second cell of each row, turning it into the knight of the round table.

Nailing the border collapse

Set border-collapse: collapse; to ensure a neat table layout with no gaps, sort of like eliminating pesky speed bumps from your parking lot.

table {
  border-collapse: collapse; /* Say goodbye to awkward gaps (speed bumps) in your table */
}

Dynamics of design flexibility

Larger and smaller tables pose different challenges. For smaller tables, where fixed width could lead to uncomfortable squashing, consider removing table-layout: fixed; to allow columns to resize dynamically based on their content.

The rarer double table tryst

Rarely, using two separate tables side by side can serve as a layout hack to achieve a specific design goal, kind of like a Siamese twin strategy for tables!

<!-- A separate table for Column 1 -->
<table style="float: left; width: 300px;">
  <!-- Rows for first column are here -->
</table>

<!-- A separate table for the remaining columns -->
<table style="float: left; width: auto;">
  <!-- Rows for remaining columns are here -->
</table>