table-layout: fixed ignores td's min-width

Question

I have a project which requires a table that includes both fixed-width and flexible-width columns.

Some of the columns need to be 80px in width always, no matter what the width of the browser.

The rest of the columns need to be a flexible width, but all be of equal width, with a min-width of 75px;

By adding table-layout:fixed; to the table I am able to get the flexible width cols to all have equal widths, BUT then the table ignores the td's min-width attribute.

If I remove the table-layout:fixed, the min-width works but the flexible width cols all have different widths (based upon the length of the text they contain).

The number of columns vary based upon data pulled from db.

I have put an example of the table with table-layout:fixed and min-width on jsfiddle: http://jsfiddle.net/7d2Uj/

Any ideas how to get min-width to work in this situation, or why this is occurring?

Solution 1

You need to be using width, not min-width for the fixed width columns, and you should set the width of the remaining columns to a percentage based on the number of columns. In your case, you had 6 columns, so I set it to 16.66%.

Working example: http://jsfiddle.net/6vw66/

Solution 2

My workaround for this was to squeeze the table to where the columns almost overlap, check the table width at that point, and set the min-width of the <table> element itself to that value. This technique is also useful if you have fixed layout with one expandable column because otherwise the expanding column would completely disappear as the window shrinks.

Ex: http://jsfiddle.net/KTCfs/

Solution 3

Solution I've found on the other resource:

1. add extra column just after fluid column to the first row
2. set width style of fluid column in the header (fixed part)
3. set attribute colspan="2" on fluid column in the body (will use extra column in the first row to auto adjust space)

Before (not working):

<table>
  <tr>
    <th style="min-width: 100px">col-1</th>
    <th style="width: 200px">col-2</th>
  </tr>
  <tr>
    <td>col-1 content</td>
    <td>col-2 content</td>
  </tr>
</table>

After:

<table>
  <tr>
    <th style="width: 100px">col-1</th> <!-- 2. -->
    <th><!--special column--></th>      <!-- 1. -->
    <th style="width: 200px">col-2</th>
  </tr>
  <tr>
    <td colspan="2">col-1 content</td>  <!-- 3. -->
    <td>col-2 content</td>
  </tr>
</table>