為什麼'最小寬度”和'最大寬度”不適用於表格單元格以及如何控制它們的大小？-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中文網其他相關文章！