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

Last Updated : 11 Apr, 2023

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>