Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Set the Table Column Width Regardless of the Text Amount in its Cells?
HTML tables display data in rows and columns using the <table> element. By default, table columns automatically adjust their width based on content, which can disrupt layout consistency. When one cell contains more text, the entire column expands, affecting the table's appearance.
The Problem with Default Table Behavior
Let us first understand how tables behave by default when content varies
<!DOCTYPE html>
<html>
<head>
<title>Default Table Column Width</title>
<style>
table, td, th {
border: 1px solid #333;
border-collapse: collapse;
padding: 8px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Table with Variable Content</h3>
<table>
<tr>
<th>Product</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>High-performance gaming laptop with advanced graphics card and 32GB RAM</td>
<td>$1200</td>
</tr>
<tr>
<td>Mouse</td>
<td>Wireless</td>
<td>$25</td>
</tr>
</table>
</body>
</html>
In this example, the Description column becomes much wider due to the longer text in the first row, creating an unbalanced table layout.
Using CSS width and table-layout Properties
The most effective method to fix column widths is using the CSS table-layout: fixed property combined with explicit width values.
Syntax
For setting fixed table layout
table {
table-layout: fixed;
width: 100%; /* or specific width */
}
th, td {
width: 33.33%; /* or specific width */
}
Table Layout Values
auto Default value. Column widths are determined by content, making columns expand based on text length.
fixed Column widths are determined by the table width and column width specifications, ignoring content length.
inherit Inherits the table-layout value from the parent element.
Example Fixed Column Width with Overflow Hidden
Here's how to create a table with fixed column widths that remain consistent regardless of content
<!DOCTYPE html>
<html>
<head>
<title>Fixed Table Column Width</title>
<style>
table {
border-collapse: collapse;
width: 600px;
table-layout: fixed;
border: 2px solid #4a90e2;
}
th, td {
border: 1px solid #4a90e2;
padding: 10px;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
th:nth-child(1), td:nth-child(1) { width: 150px; }
th:nth-child(2), td:nth-child(2) { width: 300px; }
th:nth-child(3), td:nth-child(3) { width: 150px; }
th { background-color: #f0f8ff; font-weight: bold; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Product Catalog with Fixed Column Widths</h3>
<table>
<tr>
<th>Product Name</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>Gaming Laptop</td>
<td>High-performance gaming laptop with NVIDIA RTX 4080, Intel i9 processor, 32GB DDR5 RAM, and 1TB NVMe SSD</td>
<td>$2,499.99</td>
</tr>
<tr>
<td>Wireless Mouse</td>
<td>Ergonomic wireless mouse with RGB lighting</td>
<td>$49.99</td>
</tr>
<tr>
<td>USB-C Hub</td>
<td>7-in-1 USB-C hub with HDMI, USB 3.0, SD card reader, and power delivery support for modern laptops</td>
<td>$79.99</td>
</tr>
</table>
</body>
</html>
The output shows fixed column widths with long text truncated using ellipsis (...), maintaining consistent table layout
Product Catalog with Fixed Column Widths Product Name | Description | Price Gaming Laptop | High-performance gaming laptop with NVIDIA... | $2,499.99 Wireless Mouse | Ergonomic wireless mouse with RGB lighting | $49.99 USB-C Hub | 7-in-1 USB-C hub with HDMI, USB 3.0, SD... | $79.99
Using Percentage-Based Column Widths
For responsive tables, you can use percentage values instead of fixed pixels
Example Percentage Width Columns
<!DOCTYPE html>
<html>
<head>
<title>Percentage-Based Column Width</title>
<style>
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border: 1px solid #ddd;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
th:nth-child(1), td:nth-child(1) { width: 25%; }
th:nth-child(2), td:nth-child(2) { width: 50%; }
th:nth-child(3), td:nth-child(3) { width: 25%; }
th { background-color: #f9f9f9; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Student Records with Percentage Widths</h3>
<table>
<tr>
<th>Student Name</th>
<th>Course Details</th>
<th>Grade</th>
</tr>
<tr>
<td>Alice Johnson</td>
<td>Computer Science Major with specialization in Artificial Intelligence and Machine Learning</td>
<td>A+</td>
</tr>
<tr>
<td>Bob Smith</td>
<td>Mathematics</td>
<td>A</td>
</tr>
</table>
</body>
</html>
This approach creates a responsive table where columns maintain their proportional widths across different screen sizes.
Handling Overflow Content
When text exceeds the fixed column width, you have several options to handle the overflow
| CSS Property | Effect | Use Case |
|---|---|---|
overflow: hidden |
Clips text at column boundary | Clean layout, content not critical |
text-overflow: ellipsis |
Shows "..." for truncated text | Indicates there's more content |
word-wrap: break-word |
Wraps long words to next line | All text must be visible |
white-space: nowrap |
Prevents text wrapping | Single-line display required |
Example Different Overflow Handling Methods
<!DOCTYPE html>
<html>
<head>
<title>Overflow Handling Methods</title>
<style>
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #333;
padding: 8px;
width: 33.33%;
}
.hidden { overflow: hidden; }
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wrap {
word-wrap: break-word;
overflow-wrap 
1K+ Views
