How to Create Equal Width Table Cell Using CSS ?

Last Updated : 10 Oct, 2024

Creating equal-width table cells using CSS refers to adjusting the table's layout so that all columns maintain the same width. This technique ensures a consistent and organized appearance, making the table content easier to read and visually balanced.

Here we are following some common approaches:

Table of Content

Using table-layout property
Using CSS width property

Using table-layout property

The table-layout property in CSS controls how a table's columns are sized. Setting it to `fixed` ensures equal column widths, regardless of content, providing a consistent layout for better readability and a balanced appearance.

Syntax

table-layout: auto|fixed|initial|inherit;

Example: In this example we use the table-layout property with two tables: one with auto width and another with fixed width, demonstrating default and equal cell widths in a styled format.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>table-layout property</title>
    <style>
        table {
            border-collapse: collapse;
            border: 1px solid black;
        }

        th,
        td {
            border: 1px solid black;
        }

        table#table1 {
            table-layout: auto;
            width: 200px;
        }

        /* Equal width table cell */
        table#table2 {
            table-layout: fixed;
            width: 200px;
        }

        div {
            max-width: 200px;
            padding: 10px;
            border: 1px solid black;
        }

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

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <div>
            <h3>Default width table cell</h3>
            <table id="table1">
                <tr>
                    <th>Author Name</th>
                    <th>Age</th>
                    <th>College</th>
                </tr>
                <tr>
                    <td>RaviPratap Singh</td>
                    <td>24</td>
                    <td>GFG</td>
                </tr>
                <tr>
                    <td>Rakesh Singh</td>
                    <td>25</td>
                    <td>GEEKS</td>
                </tr>
            </table>
        </div><br>
        <div>
            <h3>Equal width table cell</h3>
            <table id="table2">
                <tr>
                    <th>Author Name</th>
                    <th>Age</th>
                    <th>College</th>
                </tr>
                <tr>
                    <td>RaviPratap Singh</td>
                    <td>24</td>
                    <td>GFG</td>
                </tr>
                <tr>
                    <td>Rakesh Singh</td>
                    <td>25</td>
                    <td>GEEKS</td>
                </tr>
            </table>
        </div>
    </center>
</body>

</html>

Output:

Using CSS width property

The CSS width property allows you to define specific widths for table columns. Setting widths in equal percentage values ensures that each column remains the same size, providing a consistent layout regardless of the content or window size.

Syntax

width: auto | value | initial | inherit;

Example: In this example we the table-layout property with two tables: one with default cell widths and another with equal widths (33% each), styled with borders and a centered layout.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>table-layout property</title>
    <style>
        table {
            border-collapse: collapse;
            border: 1px solid black;
        }

        th,
        td {
            border: 1px solid black;

        }

        table#table2 td {
            width: 33%;
        }

        div {
            max-width: 200px;
            padding: 10px;
            border: 1px solid black;
        }

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

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <div>
            <h3>Default width table cell</h3>
            <table id="table1">
                <tr>
                    <th>Author Name</th>
                    <th>Age</th>
                    <th>College</th>
                </tr>
                <tr>
                    <td>RaviPratap Singh</td>
                    <td>24</td>
                    <td>GFG</td>
                </tr>
                <tr>
                    <td>Rakesh Singh</td>
                    <td>25</td>
                    <td>GEEKS</td>
                </tr>
            </table>
        </div><br>
        <div>
            <h3>Equal width table cell</h3>
            <table id="table2">
                <tr>
                    <th>Author Name</th>
                    <th>Age</th>
                    <th>College</th>
                </tr>
                <tr>
                    <td>RaviPratap Singh</td>
                    <td>24</td>
                    <td>GFG</td>
                </tr>
                <tr>
                    <td>Rakesh Singh</td>
                    <td>25</td>
                    <td>GEEKS</td>
                </tr>
            </table>
        </div>
    </center>
</body>

</html>