Last Updated : 15 Jul, 2025
The requirement of a table is very normal in the process of designing a web page. HTML provides the <table> tag to construct the table and to define rows and columns <tr> and <td> tags respectively are used.
By default, the dimensions of the rows and columns in a table are adjusted by the browser automatically in a way that fits the contents. However, there can be situations where the width of the columns are needed to be fixed. There are multiple ways to fix the width for <td> tag. Some of them are mentioned below:
<!DOCTYPE html>
<html>
<head>
<title>
Set up fixed width for
</title>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h1 style="color: #00cc00;">
GeeksforGeeks
</h1>
<!-- Making the table responsive -->
<div style="overflow-x: auto;">
<!-- Adding table in the web page -->
<table width="50%">
<tr>
<th>GfG Courses</th>
<th>Description</th>
</tr>
<tr>
<td width="40%">
DS and Algo Foundation
</td>
<td width="60%">
Master the basics of Data Structures
and Algorithms to solve complex
problems efficiently.
</td>
</tr>
<tr>
<td width="40%">Placement 100</td>
<td width="60%">
This course will guide you for
placement with theory,lecture videos,
weekly assignments, contests and doubt
assistance.
</td>
</tr>
<tr>
<td width="40%">
Amazon SDE Test Series
</td>
<td width="60%">
Test your skill & give the final
touch to your preparation before
applying for product based against
like Amazon, Microsoft, etc.
</td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Set up fixed width for <td></title>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 50%;
}
// Fixing width of first
// column of each row
td:nth-child(1) {
width: 40%;
}
// Fixing width of second
// column of each row
td:nth-child(2) {
width: 60%;
}
</style>
</head>
<body>
<h1 style="color: #00cc00;">
GeeksforGeeks
</h1>
<!-- Making the table responsive -->
<div style="overflow-x: auto;">
<!-- Adding table in the web page -->
<table>
<tr>
<th>GfG Courses</th>
<th>Description</th>
</tr>
<tr>
<td>DS and Algo Foundation</td>
<td>
Master the basics of Data Structures
and Algorithms to solve complex
problems efficiently.
</td>
</tr>
<tr>
<td>Placement 100</td>
<td>
Test your skill & give the final touch
to your preparation before applying for
product based against like Amazon,
Microsoft, etc.
</td>
</tr>
<tr>
<td>Amazon SDE Test Series</td>
<td>
Test your skill & give the final touch
to your preparation before applying for
product based against like Amazon,
Microsoft, etc.
</td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Set up fixed width for</title>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 50%;
}
table.fixed {
table-layout: fixed;
}
table.fixed td {
overflow: hidden;
}
</style>
</head>
<body>
<h1 style="color: #00cc00;">
GeeksforGeeks
</h1>
<!-- Making the table responsive -->
<div style="overflow-x: auto;">
<!-- Adding table in the web page -->
<table>
<!-- Assigning width of first
column of each row as 40% -->
<col style="width: 40%;" />
<!-- Assigning width of second
column of each row as 60% -->
<col style="width: 60%;" />
<tr>
<th>GfG Courses</th>
<th>Description</th>
</tr>
<tr>
<td>DS and Algo Foundation</td>
<td>
Master the basics of Data Structures
and Algorithms to solve complex
problems efficiently.
</td>
</tr>
<tr>
<td>Placement 100</td>
<td>
This course will guide you for
placement with theory,lecture
videos, weekly assignments,
contests and doubt assistance.
</td>
</tr>
<tr>
<td>Amazon SDE Test Series</td>
<td>
Test your skill & give the final touch
to your preparation before applying for
product based against like Amazon,
Microsoft, etc.
</td>
</tr>
</table>
</div>
</body>
</html>
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
How to set fixed width for <td> in a table ?
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4