24

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>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Stefan
  • 14,826
  • 17
  • 80
  • 143

2 Answers2

41

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.

Ben
  • 54,723
  • 49
  • 178
  • 224
Arsen7
  • 12,522
  • 2
  • 43
  • 60
  • 1
    thanks :/ I guess... simple task, but not possible with CSS :(, maybe someone postes a solution :) – Stefan Jun 21 '11 at 14:57
  • Why do you think it's not possible with CSS? If I change the 'min-width' to 'width' in your code, the first column is very thin, and the second is wide. What does not work in your case? Note that the 'width' should be applied to 'td' while 'max-width' is still perfectly correct with 'div'. – Arsen7 Jun 21 '11 at 15:14
  • Tell us how do you want it to work, and I believe the solution will be found. Maybe provide some more details or examples on how do you want the rendering to look. – Arsen7 Jun 21 '11 at 18:23
  • I have a layout, which takes 1/3 of the screen-width and has a minimum witdh of 500 and a maximum width of 700. Beside it, there is another item which takes the rest of the screen. If I just assigne a width of 66% it works fine as long as the heith of the other item doesn't take one of the maximums, at which point an overflow happens or the item just lets space out. (But this acutall has nothing to do with the original question anymore because the min, max width issue was resolved by divs!) – Stefan Jun 22 '11 at 06:15
  • I asked the new form under http://stackoverflow.com/questions/6435695/html-fullscreenlayout-with-min-width-max-width – Stefan Jun 22 '11 at 06:18
  • The "width" doesn't work on cells unless you have a fixed-width table - which is ugly for many cases. The "min-width" has some effect on non-fixed-width tables, but is not consistent - does not "obey" what you set. We need a "width-forced" setting, since what exists seems to be broken since inception. – JosephK Mar 23 '17 at 06:51
8

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>
macloving
  • 1,227
  • 1
  • 18
  • 22
  • This was the only thing that worked for me, to get cells in a variable-width table to respect a min-width value. Thanks so much for this. – JosephK Mar 23 '17 at 13:22