Min-width and max-height for table attributes

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 take it. If I define it on td it gets ignored, if I define it in an div element inside a td element, the content has the right min and max width, but the table still has the same size. (so there is a lot of free space :/)

How can I resolve this?

EDIT: I just noticed that the problem seems to only occur when the table is in fullscreen mode. Nevertheless, an element shouldn't have more than the max-width than!

Example:

<html>
<head>
    <style type="text/css">
        td {
            border: 1px solid black;
        }

        html,body,.fullheight {
            height: 100%;
            width: 100%;
        }
        .minfield {
            max-width: 10px;
            border: 1px solid red;
            overflow: hidden;
        }
    </style>    
</head>

<body>
    <table class="fullheight">
        <tr>
            <td class="minfield">
                <div class="minfield">
                    <p>hallo</p>
                </div>
            </td>
            <td><p>welt</p></td>
        </tr>
    </table>
</body>
</html>

Solution 1:

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.

Solution 2:

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>

Min-width and max-height for table attributes

Solution 1:

Solution 2:

Related

Recent Posts