Columns of table setting minimum and maximum width with css

Question

I would like to have a table that can be stretched in columns, but I have a little problem with min and max width in css.

It also seems like some conflicting answers about how this works:

• minimum / maximum width should work: Prevent text from overlap table td width
• minimum / maximum width is not supported: Minimum width and maximum height for table attributes

I would like to have the following

table{ width:100%; } .a, .b, .c { background-color: red; } .a { min-width: 10px; max-width: 20px; } .b { min-width: 40px; max-width: 45px; } .c { } <table> <tr> <td class="a">A</td> <td class="b">B</td> <td class="c">C</td> </tr> </table> 

Is there a way to achieve this without javascript (i.e. limited stretching of columns with a table)?

• I only need this to work with CSS3 + HTML5
• jsfiddle with non-expandable things: http://jsfiddle.net/4b3RZ/10/
• If I set only the minimum width in the columns, I get proportional stretching: http://jsfiddle.net/4b3RZ/8/

Below is a table of what actually happens for some different css settings:

Answer 1

Tables work differently; sometimes counter-intuitive.

The solution is to use width in the table cells instead of max-width .

Although it might seem that in this case the cells will not shrink below the specified width, they will actually be.
without c restrictions, if you give the table a width of 70 pixels, the width of a, b and c will come out as 16, 42 and 12 pixels respectively.
With a table width of 400 pixels, they behave the way you say you expect higher in your grid.
Only if you try to give the table too small a size (smaller than a.min + b.min + the contents of C), it will not work: then the table itself will be wider than indicated.

I made a fragment based on your fiddle in which I removed all borders, paddings and border-spacing so that you can measure the width more accurately.

 table { width: 70px; } table, tbody, tr, td { margin: 0; padding: 0; border: 0; border-spacing: 0; } .a, .c { background-color: red; } .b { background-color: #F77; } .a { min-width: 10px; width: 20px; max-width: 20px; } .b { min-width: 40px; width: 45px; max-width: 45px; } .c {} 

 <table> <tr> <td class="a">A</td> <td class="b">B</td> <td class="c">C</td> </tr> </table>