CSS 'min-width' increasing width of table cells larger than value

Question

I feel like I'm missing something. I have a <table> set to width: 100%; and I add CSS to prevent a column from becoming narrower than 50px. It is a simple scenario.

My problem is that the column which has min-width applied gets wider even when if it is already wider than the min-width value.

Example of problem: I apply min-width: 50px; to a td element which has a width of 123px, the td increases to a width of 167px. I expected applying min-width: 50px; to an element with a rendered width of 123px to not change the elements width.

My problem can be reproduced by running the below code and following these steps:

1. Check the width of the first column of the table
2. Verify that the column has a width greater than 50px
3. If the first column has a width less than 50px, increase the width of your browser window.
4. When the first column has a display width greater than 50px, click the button below the table.
5. The width of the first column should increase, despite not being smaller than the min-width value.

NOTE: Clicking the button will toggle a class applied to the table cells (th and td elements) which form the first column of the table. The class applies min-width: 50px;.

This problem will be considered solved by any solution that does not affect the calculated width of a table cell (th or td) with a calculated width greater than 50px and style property width: auto; when setting min-width: 50px.

I am using Google Chrome Version 46.0.2490.80 m.

Any help/insight would be greatly appreciated. Thank you.

$("button").click(function() {
  $("table tr > *:nth-child(1)").toggleClass("min-width-test")
});

table {
  width: 100%;
}
table,
table * {
  border: 1px solid black;
}
.min-width-test {
  min-width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>First</th>
    <th>Second</th>
    <th>Third</th>
    <th>Fourth</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>
</table>
<button>Toggle min-width on first column</button>

Answer 1

CSS has no specification for how min-width and max-width are handled by tables, inline tables, table cells, etc. The behavior you are seeing is how Chrome somewhat arbitrarily handles it.

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.

CSS 2.1

This hasn't been changed in any later specs.

Answer 2

As Matt mentioned in the comments, adding min-width is going to increase the size of the column. Tables auto-adjust their size based on their content, and adding a min-width of 50 will thus increase it by 50.

I've copied over your code and made it so you can visualize what's happening. Adding a min-width of 50px is like adding an invisible element of width 50 in there (which I've conveniently made un-invisible and colored red). If you want to counteract that, try removing some margins or padding (although this may break your design--can't tell without seeing exactly what you're doing). Press the "Toggle fix on first column" button to see what I mean.

$("button").click(function() {
  $("table tr > *:nth-child(1)").toggleClass("min-width-test")
});
$("#b2").click(function() {
  $("table tr > *:nth-child(1)").toggleClass("min-width-test-fixed")
});

table {
  width: 100%;
}
table,
table * {
  border: 1px solid black;
}
.min-width-test:after {
  content: '';
  width: 50px;
  height: 1px;
  background: red;
  display: block;
}
.min-width-test-fixed:after {
  content: '';
  width: 50px;
  margin-right: -50px;
  height: 1px;
  background: green;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>First</th>
    <th>Second</th>
    <th>Third</th>
    <th>Fourth</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>
</table>
<button>Toggle min-width on first column</button>
<button id="b2">Toggle fix on first column</button>