logo标签列表

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

htmlcsshtml-table
25

我有一个表格，想要定义 min-width 和 max-height 属性。如下面的例子所示：

现在我的问题是浏览器没有起作用。如果我把它定义在 td 上，就会被忽略。如果我在 td 元素内部定义一个 div 元素，内容的最小和最大宽度都是正确的，但是表格的大小仍然相同（所以有很多空闲空间 :/）。

我该如何解决这个问题？

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

例如：

<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>
2个回答
41

对于表格单元格应该使用 'width' 属性，因为对于表格单元格来说 'min-width' 和 'max-width' 是未定义的。请参见规范说明：

"在 CSS 2.1 中，'min-width' 和 'max-width' 在表格、内联表格、表格单元格、表格列和列组上的效果是未定义的。"

要强制指定宽度，可以尝试将 table-layout 属性更改为 "fixed"。规范描述了这个算法非常清楚明确。

1
谢谢 :/ 我猜...这是一个简单的任务，但是不可能用CSS完成 :(，也许有人会发布解决方案 :) - Stefan
你为什么认为这不可能用CSS实现？如果我在你的代码中将'min-width'改为'width'，第一列会非常窄，而第二列则很宽。你的情况是哪里不起作用？请注意，'width'应该应用于'td'，而'max-width'与'div'一起使用仍然是完全正确的。 - Arsen7
告诉我们你想要它如何工作，我相信解决方案会被找到。也许可以提供一些更多关于渲染效果的细节或示例。 - Arsen7
我有一个布局，它占据屏幕宽度的1/3，并且具有最小宽度为500和最大宽度为700。在它旁边，还有另一个项目，它占据了屏幕的其余部分。如果我只分配了66％的宽度，只要另一个项目的高度没有达到最大值之一，就可以正常工作，否则会发生溢出或该项目会释放空间。（但这实际上与原始问题无关，因为divs解决了最小和最大宽度问题！） - Stefan
我在http://stackoverflow.com/questions/6435695/html-fullscreenlayout-with-min-width-max-width下询问了新表单。 - Stefan
“width”在单元格上不起作用，除非您有一个固定宽度的表格 - 这对许多情况来说很丑陋。 “min-width”对非固定宽度的表格有一定影响，但不一致 - 不遵守您设置的内容。 我们需要一个“强制宽度”设置，因为现有的设置似乎从一开始就存在问题。 - JosephK
9
为了强制对td使用min-height属性，你也可以在td中放置一个不可见的图片，或将td包装在div中。 第一种情况的示例：
<td><img style="float:left;min-height:50px;visibility:hidden;width:0px;">12345</td>
这是我唯一有效的方法，使变宽表格中的单元格遵守最小宽度值。非常感谢您。 - JosephK
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接