为什么'最小宽度”和'最大宽度”不适用于表格单元格以及如何控制它们的大小？-css教程-PHP中文网

为什么'最小宽度”和'最大宽度”不适用于表格单元格以及如何控制它们的大小？

Mary-Kate Olsen

发布： 2024-10-25 07:07:02

原创

468 人浏览过

Why does `min-width` and `max-width` not work on table cells and how do I control their size?

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

尝试使用“min-”定义表格元素的最小和最大宽度时width' 和 'max-width' 属性，它可能并不简单。本文解决了一个常见问题，即这些属性似乎被忽略，从而导致意外行为。

问题：

定义“最小宽度”和“最大宽度”在“td”元素上或嵌套在“td”元素内的“div”元素内会导致冲突的行为。内容可能会遵循指定的尺寸，但表格的整体大小保持不变，留下过多的空白。

解决方案：

CSS 规范指出 'min-width ' 和 'max-width' 属性没有为表格单元格（即 'td' 元素）定义。相反，应使用“width”属性来强制执行最小宽度。

为了确保强制执行表格单元格的宽度，“table-layout”属性应设置为“fixed”。这指示浏览器根据指定的“宽度”值计算列宽，从而消除空格问题。

代码示例：

以下修改后的代码解决了该问题通过使用 'width' 属性并将 'table-layout' 设置为“fixed”：

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

        html,body,.fullheight {
            height: 100%;
            width: 100%;
        }
        .minfield {
            width: 10px;
            border: 1px solid red;
            overflow: hidden;
        }
        table {
            table-layout: fixed;
        }
    </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></code>

登录后复制

请注意，将 'table-layout' 设置为“fixed”也可能会影响未明确定义的列宽。为避免出现意外后果，请确保所有列都指定了宽度。

以上是为什么'最小宽度”和'最大宽度”不适用于表格单元格以及如何控制它们的大小？的详细内容。更多信息请关注PHP中文网其他相关文章！