Home > Article > Web Front-end > How to Set Min-Width and Max-Height for Table Cells in HTML?

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

Linda HamiltonOriginal: 2024-10-25 02:36:02969browse

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>

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>

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!

css html for while try using Property undefined this table td

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Dynamically Modify CSS Declarations with JavaScript?Next article：How to Dynamically Modify CSS Declarations with JavaScript?

See more

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

Related articles