Wednesday, 21 August 2013

Table columns, setting both min and max width with css

Table columns, setting both min and max width with css

I would like to have a table which in the columns can stretch but I'm
having a little trouble with min and max width in css.
It also seems that theres some conflicting answers around how this works:
min/max width should work: table td width under control
min/max width are unsupported: Min-width and max-height for table atrributes
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 of achieving this without javascript (ie constrained
stretching of columns with a table)?
I only need this to work with CSS3 + HTML5
a jsfiddle with stuff not expanding:http://jsfiddle.net/4b3RZ/6/
if I set only min-width on the columns i get a proportional
stretch:http://jsfiddle.net/4b3RZ/8/
below is a table of what actually gets rendered for some different css
setups:

No comments:

Post a Comment