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?

Clavier

Answer 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/

Schutzstaffel

Hi, thanks for your answer. I was using both width and min-width because it was preventing the col from collapsing when I shrunk the browser window before I put the table-layout:fixed in. I tried taking out the min-width and just leaving the width, but that didn't seem to change anything. Unfortunately the number of columns changes depending on data from the db, so I can't calculate the width as a % in a static css. Writing this I now realise one option could be to dynamically build the css through PHP based on col num which I hadn't thought of before. Maybe that is what I will need to do. – Clavier

End result is I've created a dynamically generated css rule to set a width percentage on each flexible width column, depending on the total number of columns. Not ideal, but it's working. – Clavier

Answer 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/

Forbidden

Answer 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>

Erbil

Wow. It is an "interesting" workaround but it works. Kudos. – Fragile

This is absolutely brilliant!!! – Sian