Question

我有一张表，我想定义min-width和max-height属性。见下面的例子。

我现在的问题是浏览器没有接受它。如果我在td上定义它，它会被忽略，如果我在div元素内的td元素中定义它，内容具有正确的最小和最大宽度，但表仍然有大小相同。（所以有很多可用空间：/）

我该如何解决这个问题？

编辑：我只是注意到问题似乎只发生在表格处于全屏模式时。尽管如此，元素的最大宽度不应超过！

示例：

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

Answer 1

对于表格单元格，应使用“width”属性，因为表格单元格的“min-width”和“max-width”未定义。请参阅specification：

“在CSS 2.1中，'min-width'和'max-width'对表，内联表，表格单元格，表格列和列组的影响未定义。”

要强制执行宽度，您可以尝试将table-layout属性更改为“已修复”。该规范非常清楚地描述了算法。

Answer 2

要强制td的min-height属性，你也可以在td中放入不可见的图像，或者将td包装成div。第一种情况的例子：

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

Answer 3

我没有看到设置表格和单元格的最小宽度有问题。见 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>

和CSS：

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

请记住，最小宽度取决于宽度（或最大宽度）。 max-width覆盖width，min-width覆盖width或max-width。换句话说，请务必在min-width应用的元素的父元素上设置width属性： jsFiddle

表属性的最小宽度和最大高度

3 个答案: