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%".
Explore
HTML Basics
Structure & Elements
Lists
Visuals & Media
Layouts & Designs
Projects & Advanced Topics
Tutorial References