Min-width and max-height for table attributes

Question

I have a table and I want to define the min-width and max-height properties. See example below.

My problem now is that the browser doesn\'t

Answer 1

To force min-height attribute for td you also can put invisible image in td, or wrap you td into div. Example for first case:

<td><img style="float:left;min-height:50px;visibility:hidden;width:0px;">12345</td>

Answer 2

For table cells the 'width' property should be used, as the 'min-width' and 'max-width' is undefined for table cells. See the specification:

"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."

To enforce the width, you may try to change the table-layout property to "fixed". The specification describes the algorithm pretty clearly.

Answer 3

I don't see a problem with setting min-width for tables and cells. See this jsFiddle.

HTML:

<table style="border:solid 1px #000;">
    <tr>
        <td id="cell-one" style="border:solid 1px #000;">
            test 1
        </td>
        <td style="border:solid 1px #000;">
            test 2
        </td>
    </tr>
</table>

and CSS:

table{width: 90%;}
td#cell-one{min-width: 20%;}

Remember, min-width is dependent on width (or max-width). max-width overrides width, and min-width overrides width or max-width. In other words, be sure to set the width property on the parent of the element you apply min-width to: jsFiddle