How to set table column width constant regardless of the amount of text in its cells ?

Last Updated : 23 Jul, 2025

HTML tables are a great way to create tabular layouts for the web page so that the user can access the data in tabular format as it is a much more user-friendly way to present a certain type of data. In this article, we will see how we can set the column width of a table to a fixed width that does not change with respect to the amount of text in its cell.

Approach:

To make the column width fixed, we need to follow the following steps:

Step 1: Set the "table-layout" property of the <table> tag to "fixed" using CSS. This will make the table have a fixed layout. Also, set the "width" of the table.
Step 2: Define the amount of width you want to provide to each column by selecting it in the CSS and then setting its "width" property.

Syntax:

Setting the table-layout to fixed:

table{
    table-layout: fixed:
    width: <table-width>;
    ...
}

Setting the width of the column:

column-selector{
    width: <column-width>;
    ...
}

Example 1: In this example, we have a table having article names and authors and we have set the width of each column to "100px" using the above approach. We have also set the "overflow" property of the <td> tag to "auto" so that if the text starts overflowing then it allows scrolling functionality.

HTML

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

<head>
    <title>table column width</title>

    <style>
        table{
            table-layout: fixed;
            width: 400px;
        }
        td{
            padding: 5px;
            border: 2px solid black;
            width: 120px;
            overflow: auto;
        }
        
        .column2{
            color: green;
            font-weight: bold;
        }
    </style>
</head>

<body style="font-family: sans-serif;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        Set the table column width 
        constant with any amount text
    </h3>

    <h5>
        GeeksforGeeks Article List For You
    </h5>
    <table style="font-size: 18px;">
        <tr style="background-color:black;
                   color:springgreen;">
            <td>Sno.</td>
            <td>Article Title</td>
            <td>Article Author</td>
        </tr>
        <tr>
            <td>1</td>
            <td class="column2">
                What is Binary Search Algorithm?
            </td>
            <td>@kanikajoshi2209</td>
        </tr>
        <tr>
            <td>2</td>
            <td class="column2">
                Check if there exists any subarray
                with the given conditions
            </td>
            <td>@pradeep6036ymca</td>
        </tr>
        <tr>
            <td>3</td>
            <td class="column2">
                Communication Protocols In System Design
            </td>
            <td>@solankimayank</td>
        </tr>
    </table>
</body>

</html>

Output:

Example 2: In this example, we have fixed the width of a column of the table and set it to "25%". We have set the overflow property to "hidden" to hide text floating outside and the width of the table is set to "300px".

HTML

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

<head>
    <title>
        Set the table column width constant
    </title>

    <style>
        table {
            width: 300px;
            table-layout: fixed;
            background-color: green;
        }
        td {
            padding: 5px;
            border: 2px solid black;
            width: 25%;
            overflow: hidden;
        }
    </style>
</head>

<body style="font-family:sans-serif;">

    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        Set the table column width constant
        for any text amount
    </h3>

    <table style="font-size: 18px;">
        <tr style="background-color:black;
                   color:springgreen;">
            <td>Sno.</td>
            <td>Article Title</td>
            <td>Article Author</td>
        </tr>
        <tr>
            <td>1</td>
            <td>What is Binary Search Algorithm</td>
            <td>@kanikajoshi2209</td>
        </tr>
        <tr>
            <td>2</td>
            <td>
                Check if there exists any
                subarray with the given conditions
            </td>
            <td>@pradeep6036ymca</td>
        </tr>
    </table>
</body>

</html>

Output:

HTML Introduction

mycodenotein

Improve

Article Tags :

How to set table column width constant regardless of the amount of text in its cells ?

Approach:

Syntax:

Similar Reads

Basics

HTML Structure & Elements

HTML List

HTML Visuals & Media

HTML Layout & Design

HTML Projects& Advanced Topics

HTML Tutorial References

Thank You!

What kind of Experience do you want to share?