JavaScript Answers

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

Spread the love

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>
    <title>Table with min-width for td</title>
        table {
            border-collapse: collapse;
            width: 100%;

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

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *