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
Selected Reading
How to set the table layout algorithm using CSS ?
The CSS table-layout property controls how the browser calculates the widths of table columns and cells. This property determines whether the table layout algorithm should be automatic (based on content) or fixed (based on predefined widths).
Syntax
table {
table-layout: auto | fixed | initial | inherit;
}
Possible Values
| Value | Description |
|---|---|
auto |
Default. Column width is based on content inside cells |
fixed |
Column width is based on first row or col elements |
initial |
Sets property to its default value |
inherit |
Inherits value from parent element |
Example 1: Automatic Table Layout
The following example shows a table with automatic layout, where column widths adjust to content
<!DOCTYPE html>
<html>
<head>
<style>
.auto-table {
table-layout: auto;
width: 400px;
border-collapse: collapse;
border: 2px solid #333;
}
.auto-table th, .auto-table td {
border: 1px solid #666;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<h3>Auto Table Layout</h3>
<table class="auto-table">
<tr>
<th>Name</th>
<th>Age</th>
<th>Description</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>Software engineer with extensive experience in web development</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>Designer</td>
</tr>
</table>
</body>
</html>
A table where the "Description" column expands to accommodate the longer text, while "Name" and "Age" columns remain narrow based on their content.
Example 2: Fixed Table Layout
This example demonstrates fixed layout where column widths are determined by the first row
<!DOCTYPE html>
<html>
<head>
<style>
.fixed-table {
table-layout: fixed;
width: 400px;
border-collapse: collapse;
border: 2px solid #333;
}
.fixed-table th, .fixed-table td {
border: 1px solid #666;
padding: 8px;
text-align: left;
overflow: hidden;
}
.fixed-table th:nth-child(1) { width: 20%; }
.fixed-table th:nth-child(2) { width: 15%; }
.fixed-table th:nth-child(3) { width: 65%; }
</style>
</head>
<body>
<h3>Fixed Table Layout</h3>
<table class="fixed-table">
<tr>
<th>Name</th>
<th>Age</th>
<th>Description</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>Software engineer with extensive experience in web development</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>Designer</td>
</tr>
</table>
</body>
</html>
A table with fixed column widths (20%, 15%, 65%) that don't change based on content. Long text may be cut off or wrap within the fixed width.
Key Differences
| Aspect | Auto | Fixed |
|---|---|---|
| Rendering Speed | Slower | Faster |
| Column Width | Based on content | Predefined |
| Content Overflow | Rarely occurs | May occur |
| Performance | Requires full content scan | Renders after first row |
Conclusion
The table-layout property offers control over how tables render. Use auto for content-driven layouts and fixed for better performance with predictable column widths.
Updated on: 2026-03-15T16:12:54+05:30
409 Views
Advertisements