How to fix the width of columns in the table ?

Last Updated : 09 Sep, 2024

Fixing the width of columns in a table involves setting a specific width for each column to maintain consistent sizing. This can be achieved using CSS properties like width on <th> or <td> elements, or using the <colgroup> and <col> tags to control column widths.

Syntax

<td width ="px | %">

Approach:

The width attribute is used to set the width of a column. It is added in the <td> tag.
The width should be specified according to the content, either in pixels or percentages.
If the content in the column is large, it will overflow.

Example 1: In this example, the first column’s width is fixed, while others adjust based on screen size. If the fixed width is insufficient, the first column may overflow and behave like the others.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            margin-left: auto;
            margin-right: auto;
            font-size: 20px;
            height: 100%;
            table-layout: fixed;
        }

        td {
            border: 1px solid black;
            text-align: center;
            padding: 10px;
        }

        tr:nth-child(even) {
            background-color: #00cf45;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>

        <h2>
            To fix the width of
            columns in the table
        </h2>

        <table>
            <tr style="color:white; 
                background-color:black;">
                <td width="100px">Col1</td>
                <td>Col2</td>
                <td>Col3</td>
            </tr>
            <tr>
                <td>
                    Width of this column remains
                    same on varying screen-size
                </td>
                <td>
                    Width of this column changes
                    on varying screen-size
                </td>
                <td>
                    Width of this column also changes
                    on varying screen-size
                </td>
            </tr>
            <tr>
                <td>Geek1</td>
                <td>Geek2</td>
                <td>Geek3</td>
            </tr>
            <tr>
                <td>Geek4</td>
                <td>Geek5</td>
                <td>Geek6</td>
            </tr>
            <tr>
                <td>Geek7</td>
                <td>Geek8</td>
                <td>Geek9</td>
            </tr>
        </table>
    </center>
</body>

</html>

Output:

Example 2: In this example, we creates a centered table with a fixed-width first column and dynamic-width other columns. The table has alternating row colors, and headers are styled with a different background color.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            margin-left: auto;
            margin-right: auto;
            font-size: 20px;
            height: 100%;
            table-layout: fixed;
        }

        td {
            border: 1px solid black;
            text-align: center;
            padding: 10px;
        }

        tr:nth-child(even) {
            background-color: #00cf45;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>

        <h2>
            To fix the width of
            columns in the table
        </h2>

        <table>
            <tr style="color:white; 
                background-color:black;">
                <td width="50%">Col1</td>
                <td>Col2</td>
                <td>Col3</td>
            </tr>
            <tr>
                <td>
                    Width of this column remains
                    same on varying screen-size
                </td>
                <td>
                    Width of this column changes
                    on varying screen-size
                </td>
                <td>
                    Width of this column also changes
                    on varying screen-size
                </td>
            </tr>
            <tr>
                <td>Geek1</td>
                <td>Geek2</td>
                <td>Geek3</td>
            </tr>
            <tr>
                <td>Geek4</td>
                <td>Geek5</td>
                <td>Geek6</td>
            </tr>
            <tr>
                <td>Geek7</td>
                <td>Geek8</td>
                <td>Geek9</td>
            </tr>
        </table>
    </center>
</body>

</html>

Output: The width of the column is set to “50%” , so even after changing the screen size, the width of the first column remains “50%”.

How to center contents of an HTML table ?

SHUBHAMSINGH10

Improve

Article Tags :

How to fix the width of columns in the table ?

Syntax

Similar Reads

Thank You!

What kind of Experience do you want to share?