How to Set Min-Width and Max-Height for Table Cells in HTML?-CSS Tutorial-php.cn

How to Set Min-Width and Max-Height for Table Cells in HTML?

Linda Hamilton

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

Original

1074 people have browsed it

How to Set Min-Width and Max-Height for Table Cells in HTML?

Defining Min-Width and Max-Height for Table Cells

In HTML tables, it is not possible to set the min-width and max-width properties directly on table cells (td). This functionality is undefined for this element in CSS 2.1.

Resolution

Instead of using min-width and max-width, you should use the width property for table cells. For example:

<code class="css">td {
    width: 10px;
    border: 1px solid black;
}</code>

Copy after login

Example

To limit the content width within a table cell and prevent excessive free space, consider the following modified HTML and CSS code:

<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;
        }
    </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

Additional Note

In case you still encounter issues with table size while in fullscreen mode, try setting the table-layout property to "fixed" in your CSS. This will enforce a fixed-width layout for the table, eliminating unnecessary white space.

The above is the detailed content of How to Set Min-Width and Max-Height for Table Cells in HTML?. For more information, please follow other related articles on the PHP Chinese website!