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

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

Mary-Kate Olsen

Release： 2024-10-25 07:07:02

Original

468 people have browsed it

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

Min-width and Max-height Attributes for Tables

When attempting to define minimum and maximum widths for table elements using the 'min-width' and 'max-width' properties, it may not be straightforward. This article addresses a common issue where these properties appear to be ignored, causing unexpected behavior.

Problem:

Defining 'min-width' and 'max-width' on 'td' elements or within 'div' elements nested inside 'td' elements results in conflicting behavior. The content may adhere to the specified dimensions, but the table's overall size remains unchanged, leaving excessive whitespace.

Solution:

The CSS specification indicates that 'min-width' and 'max-width' properties are not defined for table cells (i.e., 'td' elements). Instead, the 'width' property should be used to enforce a minimum width.

To ensure the width of table cells is enforced, the 'table-layout' property should be set to "fixed." This instructs the browser to calculate column widths based on the specified 'width' values, eliminating the whitespace issue.

Code Example:

The following modified code resolves the problem by using the 'width' property and setting 'table-layout' to "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>

Copy after login

Note that setting 'table-layout' to "fixed" may also affect column widths that are not explicitly defined. To avoid unintended consequences, ensure that all columns have their widths specified.

The above is the detailed content of Why does `min-width` and `max-width` not work on table cells and how do I control their size?. For more information, please follow other related articles on the PHP Chinese website!