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
Usage of CSS table-layout property
The table-layout property controls how a browser calculates column widths in HTML tables. This property significantly affects rendering performance and layout behavior, especially with large tables or variable content.
Syntax
table-layout: auto | fixed | inherit;
Property Values
| Value | Description | Performance |
|---|---|---|
auto |
Browser calculates widths based on cell content (default) | Slower - requires content analysis |
fixed |
Uses first row to determine column widths | Faster - renders immediately |
inherit |
Inherits value from parent element | Depends on inherited value |
Example: Comparing auto vs fixed
The following example demonstrates the difference between auto and fixed table layouts with identical content:
<!DOCTYPE html>
<html>
<head>
<style>
table.auto {
table-layout: auto;
border-collapse: collapse;
margin-bottom: 20px;
}
table.fixed {
table-layout: fixed;
border-collapse: collapse;
}
td {
border: 1px solid #ccc;
padding: 8px;
}
.header {
background-color: #f0f0f0;
font-weight: bold;
}
</style>
</head>
<body>
<h3>Table Layout: Auto</h3>
<table class="auto" width="100%">
<tr>
<td width="20%" class="header">Auto Layout</td>
<td width="40%">1000000000000000000000000000</td>
<td width="40%">Short text</td>
</tr>
</table>
<h3>Table Layout: Fixed</h3>
<table class="fixed" width="100%">
<tr>
<td width="20%" class="header">Fixed Layout</td>
<td width="40%">1000000000000000000000000000</td>
<td width="40%">Short text</td>
</tr>
</table>
</body>
</html>
Key Differences
Auto Layout: The browser analyzes all cell content before determining column widths. Long content may cause columns to expand beyond their specified widths, potentially breaking the layout.
Fixed Layout: The browser uses only the first row to calculate column widths and renders the table immediately. Content that exceeds the fixed width will be clipped or wrapped within the cell boundaries.
When to Use Each
Use table-layout: fixed when:
- You need predictable column widths
- Working with large tables where performance matters
- Content length is variable but layout must remain consistent
Use table-layout: auto when:
- Content length varies significantly and should determine layout
- You want the browser to optimize column widths automatically
- Working with smaller tables where performance isn't critical
Conclusion
The table-layout property offers important control over table rendering behavior. Use fixed for consistent layouts and better performance, or auto when content should drive the column sizing.
96 Views
