How to set min-width in HTML table’s td with CSS?

To set a minimum width for the <td> elements in an HTML table using CSS, you can use the min-width property.

To do this we write:

<!DOCTYPE html>
<html>
<head>
    <title>Table with min-width for td</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        td {
            border: 1px solid black;
            padding: 8px;
            min-width: 100px; /* Set the minimum width for td */
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td>Longer content in this cell</td>
            <td>Short</td>
            <td>Medium content</td>
        </tr>
    </table>
</body>
</html>

In this example, we’ve set a minimum width of 100px for all <td> elements using the CSS min-width property.

The <table> element has a width of 100% to make it span the entire width of its container.

Each <td> has a border, padding, and minimum width applied.

You can adjust the min-width value according to your requirements.

This will ensure that each <td> element in the table has a minimum width of 100px, preventing them from shrinking beyond that width even if the content is narrower.