How to Define a Minimum Width for HTML Table Cell using CSS ?

Last Updated : 24 Apr, 2025

To set a minimum width for an HTML table cell using CSS, apply the min-width property directly to the <td> element, ensuring it does not shrink below the specified size. This ensures a minimum width for the cell content, maintaining layout integrity.

Table of Content

Using the min-width Property
Applying a Class or ID

Using the min-width Property

The min-width property in CSS sets the minimum width of an element, ensuring it does not shrink beyond the specified value. This is useful for preventing content compression and maintaining a minimum size for responsive design. Here we will use this property by using an element selector.

Syntax

td {
    min-width: value; /* Replace 'value' with the desired minimum width */
}

Example: Implementation to set min-width by using element selector.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Table Cell min-width</title>
    <style>
        td {
            min-width: 100px;
            border: 1px solid #ddd;
            /* for visualization */
            padding: 8px;
        }
    </style>
</head>

<body>

    <table>
        <h1>GeeksforGeeks</h1>
        <h3>
              Using min-width property using 
              element selector
          </h3>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
    </table>

</body>

</html>

Output:

Applying a Class or ID

In this approach, we will assign a class or ID to the table cell and then define the minimum width in the CSS for that class or ID.

Syntax

/* Using Class */

.minWidthCell {
    min-width: value;
}

/* Using ID */

#minWidthCell {
    min-width: value; 
}

Example: Implementation to set min-width by using class and ID

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Table Cell Min Width Example</title>
    <style>
        /* Using Class */
        .minWidthCell {
            min-width: 100px;
            border: 1px solid #ddd;
            padding: 8px;
        }

        /* Using ID */
        #minWidthCell {
            min-width: 350px;
            border: 1px solid #ddd;
            padding: 8px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Using class and ID property</h3>
    <table>
        <tr>
            <td class="minWidthCell">Cell 1</td>
            <td class="minWidthCell">Cell 2</td>
            <td id="minWidthCell">Cell 3</td>
        </tr>
    </table>

</body>

</html>

Output:

Screenshot-2024-02-05-162200

How to Create Header Cell in a Table using HTML?

hemanthbhb2001

Improve

Article Tags :

How to Define a Minimum Width for HTML Table Cell using CSS ?

Using the min-width Property

Syntax

Applying a Class or ID

Syntax

Similar Reads

Thank You!

What kind of Experience do you want to share?