<div id="readability-page-1" class="page"><section itemprop="text">
 
 <h2 id="goal">Goal</h2>

Column-width requirements for a table:

<ul>
 <li>Columns like <code>A</code>, <code>B</code>, <code>C</code>·<code>D</code> …: fixed width</li>
 <li>Only one column (the one holding long content) had a tricky requirement:
 <ul>
 <li>When the screen is wide, it should grow to fill the leftover space</li>
 <li>When the screen is narrow, it should keep a minimum of 250px</li>
 </ul>
 </li>
</ul>

One-line summary: “Everything fixed, only one column flexible (min 250px).”

<hr>

<h2 id="the-symptom">The Symptom</h2>

Without thinking much, I just slapped <code>min-width</code> onto the style.

<div><pre><code>&lt;table&gt;
 {/*...*/}
 &lt;col style= /&gt; // fixed-width column
 &lt;col style= /&gt; // flexible column: min 250
 {/*...*/}
&lt;/table&gt;
</code></pre></div>

But <code>min-width</code> didn’t work. The browser was just ignoring <code>minWidth</code>. <code>maxWidth</code> was ignored too. Whether I set <code>table-layout</code> to <code>fixed</code> or <code>auto</code>, no matter what I did, min/max width simply would not work! What on earth is going on?

<hr>

<h2 id="-the-cause">🔍 The Cause</h2>

The answer was in the CSS spec.

<a href="https://www.w3.org/TR/CSS2/visudet.html#min-max-widths">10.4 Minimum and maximum widths: ‘min-width’ and ‘max-width’</a>

Reading it, it looks like <code>min-width</code> &amp; <code>max-width</code> should apply to a <code>table col</code> — after all, it says they apply to every element except <code>non-replaced inline elements, table rows, and row groups</code>.

But the note in <code>10.4</code> says this:

<code>In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.</code>

What does it even mean that <code>min-width</code> and <code>max-width</code> are “undefined” for table columns?? It means the CSS spec does not define what effect <code>min-width</code> and <code>max-width</code> will produce.

What a garbage document — you can’t even tell what it’s trying to say.

So there’s no way to know how a browser will implement the style. You have to give up on using min/max width on a table col.

<blockquote>
 Note: even by the current <a href="https://www.w3.org/TR/css/">CSS Snapshot 2026</a> — the index of the specs that together define “CSS” today — the table model is still defined by CSS2, with no modern module replacing it. That’s why we cite CSS2 here, even though it looks dated. table is terrible.
</blockquote>

<hr>

<h2 id="the-solution">The Solution</h2>

Change the approach. Give up on min/max.

Looking at the <a href="https://www.w3.org/TR/CSS2/tables.html#fixed-table-layout">CSS spec #fixed-table-layout</a>, the behavior for each <code>table-layout</code> value is:

<table>
 <thead>
 <tr>
 <th>Mode</th>
 <th>How column width is determined</th>
 <th>min/max</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td><code>fixed</code></td>
 <td>Determined only by the <code>width</code> of <code>&lt;col&gt;</code>/the first row. Columns without a width split the remaining space equally</td>
 <td>undefined</td>
 </tr>
 <tr>
 <td><code>auto</code></td>
 <td>Based on content width (<code>width:100%</code> absorbs the slack)</td>
 <td>undefined</td>
 </tr>
 </tbody>
</table>

Let’s tackle the fixed-width problem first.

<h3 id="1-the-fixed-width-problem">1. The fixed-width problem</h3>

<ol>
 <li>Set <code>table-layout: fixed</code></li>
 <li>Give the fixed-width columns a <code>width</code></li>
 <li>Don’t give the flexible column a <code>width</code> (it absorbs the remaining space)</li>
</ol>

This solves the fixed-width-column part first. The flexible column takes up all of the table width left over after the fixed columns consume theirs. So as the browser window gets wider, that column’s width grows too.

As the browser window gets narrower, that colum’s width narrows too and the contents of the column will be disappear. So minimum-width is needed.

<h3 id="2-the-flexible-columns-minimum-width-problem">2. The flexible column’s minimum-width problem</h3>

Since <code>min-width</code> doesn’t work on a <code>table col</code>, what if we put <code>min-width</code> on the <code>table</code> itself as a workaround?

[table’s own min-width] = [sum of all fixed column widths] + [flexible column’s minimum width]

Just set it like that, right?

But per the CSS 2.1 spec we checked above, the effect of <code>min-width</code> on a table is also undefined. So do we give up here? Surprisingly, <code>min-width</code> works just fine on a <code>table</code>. It works in Chrome, Safari, and Firefox alike. So we can go ahead with the plan.

The code looks like this:

<div><pre><code>const tableMinWidth = sumOfFixedColumnWidths + flexibleColumnMinWidth;

&lt;div style=&gt; // scroll appears when the container is narrower than the table's min-width
 &lt;table style=&gt;
 &lt;colgroup&gt;
 &lt;col style= /&gt; // fixed-width column
 &lt;col /&gt; // flexible column
 &lt;/colgroup&gt;
 // ...
 &lt;/table&gt;
&lt;/div&gt;
</code></pre></div>

CSS really is a trash technology.

By the way, the code above breaks if there are 2 or more flexible columns.

<hr>

<h2 id="tldr">TL;DR</h2>

<ul>
 <li>The <code>min-width</code> and <code>max-width</code> styles on an HTML table column are ignored</li>
 <li>But the <code>min-width</code> style on an HTML table itself works</li>
 <li>So if you want to make a specific column flexible, work around it by putting <code>min-width</code> on the table</li>
</ul>

EOD

20260611

 
 </section></div>

Never test

Goal
Column-width requirements for a table:
Columns like A, B, C·D …: fixed width
Only one column (the one holding long content) had a tricky requirement:
 
When the screen is wide, it should grow to fill the leftover space
When the screen is narrow, it should keep a minimum of 250px
One-line summary: “Everything fixed, only one column flexible (min 250px).”
The Symptom
Without thinking much, I just slapped min-width onto the style.
<table>
 {/*...*/}
 <col style= /> // fixed-width column
 <col style= /> // flexible column: min 250
 {/*...*/}
</table>
But min-width didn’t work. The browser was just ignoring minWidth. maxWidth was ignored too. Whether I set table-layout to fixed or auto, no matter what I did, min/max width simply would not work! What on earth is going on?
🔍 The Cause
The answer was in the CSS spec.
10.4 Minimum and maximum widths: ‘min-width’ and ‘max-width’
Reading it, it looks like min-width & max-width should apply to a table col — after all, it says they apply to every element except non-replaced inline elements, table rows, and row groups.
But the note in 10.4 says this:
In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.
What does it even mean that min-width and max-width are “undefined” for table columns?? It means the CSS spec does not define what effect min-width and max-width will produce.
What a garbage document — you can’t even tell what it’s trying to say.
So there’s no way to know how a browser will implement the style. You have to give up on using min/max width on a table col.
Note: even by the current CSS Snapshot 2026 — the index of the specs that together define “CSS” today — the table model is still defined by CSS2, with no modern module replacing it. That’s why we cite CSS2 here, even though it looks dated. table is terrible.
The Solution
Change the approach. Give up on min/max.
Looking at the CSS spec #fixed-table-layout, the behavior for each table-layout value is:
Mode
 How column width is determined
 min/max
 
fixed
 Determined only by the width of <col>/the first row. Columns without a width split the remaining space equally
 undefined
 
auto
 Based on content width (width:100% absorbs the slack)
 undefined
 
Let’s tackle the fixed-width problem first.
1. The fixed-width problem
Set table-layout: fixed
Give the fixed-width columns a width
Don’t give the flexible column a width (it absorbs the remaining space)
This solves the fixed-width-column part first. The flexible column takes up all of the table width left over after the fixed columns consume theirs. So as the browser window gets wider, that column’s width grows too.
As the browser window gets narrower, that colum’s width narrows too and the contents of the column will be disappear. So minimum-width is needed.
2. The flexible column’s minimum-width problem
Since min-width doesn’t work on a table col, what if we put min-width on the table itself as a workaround?
[table’s own min-width] = [sum of all fixed column widths] + [flexible column’s minimum width]
Just set it like that, right?
But per the CSS 2.1 spec we checked above, the effect of min-width on a table is also undefined. So do we give up here? Surprisingly, min-width works just fine on a table. It works in Chrome, Safari, and Firefox alike. So we can go ahead with the plan.
The code looks like this:
const tableMinWidth = sumOfFixedColumnWidths + flexibleColumnMinWidth;
<div style=> // scroll appears when the container is narrower than the table's min-width
 <table style=>
 <colgroup>
 <col style= /> // fixed-width column
 <col /> // flexible column
 </colgroup>
 // ...
 </table>
</div>
CSS really is a trash technology.
By the way, the code above breaks if there are 2 or more flexible columns.
TL;DR
The min-width and max-width styles on an HTML table column are ignored
But the min-width style on an HTML table itself works
So if you want to make a specific column flexible, work around it by putting min-width on the table
EOD
20260611

Making Only Some Columns Flexible-Width in an HTML Table — When `min-width` Just Won’t Work

댓글