Open In App

How to fix the width of columns in the table ?

Last Updated : 31 Aug, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

We have already seen the article, How to fix the height of rows in the table.

The width of the columns i.e. td in a table can be fixed very easily. This can be done by adding the width attribute in the <td> tag. If the width is not specified, the width of the column changes according to the change in the content. The specifications of width for the columns can be in pixels, or percentage.

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 percentage.
  • If the content in the column is large, it will overflow.

Example 1: In this example, the width of the first column is fixed, but the width of the other columns are not fixed. So, when we change the size of the screen, the width of the first column remains the same, but the width of the other column changes according to the content. However, if the specified width is not sufficiently large according to the content, this may not work, and the first column will overflow and behave similarly to the other column.

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: Run the following code and change the screen-size to see the difference between the columns.

  • Before changing the screen-size:
  • After changing the screen-size:

Example 2: In this example, <td width =”%”> is used.

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%”.

  • Before changing screen-size:
  • After changing screen-size:


Previous Article
Next Article

Similar Reads

How to make a grid with two columns where 1st column has 20% of width and 2nd one 80% width in Tailwind CSS ?
Tailwind CSS simplifies the process of making complex UI designs. It has a lot of predefined styles in form of classes, which can be applied to any HTML element in the code. Also, one advantage of Tailwind CSS is that during the production build, it analyzes the HTML components, and removes any unused CSS, hence decreasing the overall size of the C
4 min read
Which table property specifies the width that should appear between table cells in CSS ?
In this article, we will see how to specify the width that should appear between table cells. CSS provides the border-spacing property that can be used to set the distance between the borders of neighboring cells in the Table. This property works only when the border-collapse property is set to no-collapse separate. Syntax: border-spacing: length|i
2 min read
How to create table with 100% width, with vertical scroll inside table body in HTML ?
This article explains how to create a table with a 100% width using the `width` property. To add a vertical scroll bar inside the table body, use the `overflow-y` property. By changing the `display` property of `tbody` to `block`, we can display the block level element. However, when changing the `display` property of `tbody`, we must also change t
2 min read
HTML width/height Attribute vs CSS width/height Property
In HTML 5, few elements follow the width and height attributes and maximum elements do not follow this attribute. Like img, iframe, canvas, and svg kind of elements follow the width and height attributes but div, span, article and section type of elements don't follow them.The width and height attributes are affected in img, svg tags, those are wea
3 min read
Difference Between css(‘width’) and width() methods In jQuery
In jQuery, we have two ways to change the width of any HTML element. The jQuery css() method and width() method, below both the methods are described properly with the example. jQuery CSS('width') Method: It is a method present in jQuery which is used to get or set the property on the matched element. It is a property used to get or set the width o
3 min read
How to add Background-Color for Text Width Instead of Entire Element Width using CSS ?
In this article, we will see how to add background color for the text width instead of the entire element width using CSS. The display: inline or display: inline-block property is used to set the background color of the text width. Syntax: display: inline; display: inline-block; Approach: We will create an element and then apply the display: inline
2 min read
What is the difference between 'width: 100%' and 'width: 100vw' in CSS ?
The CSS width Property is used to set the width of the text and images. The width can be assigned to the text and images in the form of pixels(px), percentages (%), centimeters (cm), etc. The width: 100% sets an element's width relative to its containing block, making it responsive within its parent. The width: 100% responds to the container's size
1 min read
How to specify the optimal width for the columns in CSS ?
In this article, we will learn to specify the optimal width for the columns in CSS. The column-width property of CSS is used to specify the optimal width for the columns. Approach: We can specify the optimal width for the columns in CSS using the column-width property. We set a value for the column width, and all column's widths are not less than t
2 min read
How to set width style and color of rule between columns in CSS ?
In this article, we will learn how to specify the width, style, and color of the rule between columns. To set the width and color of the rule between columns in CSS, you can use the column-rule properties. Approach: The column-rule property is used to specify the width, style, and color of the rule between columns. It takes three values width of th
2 min read
Bootstrap 5 Columns Offsetting Columns
Bootstrap 5 Offsetting columns can offset grid columns in two ways, offset classes and margin utilities. Offset classes are used to match the size of columns and margin utilities are used for quick layouts. Bootstrap 5 Offsetting columns: Offset classes: This class is used to set the offset of the grid. Size is the among small (sm), medium (md), an
2 min read