In this article, we will see the difference between fixed auto layout vs auto table layout in CSS. Table layout in CSS is handled by the table-layout property. This property specifies the algorithm that the browser uses to determine the width of the table and its columns.
There are 2 types of table layout:
- fixed: Table and column widths are set by the fixed table arrangement.
- auto: Auto table layout is the default value.
Table of Content
Fixed Table Layout
Fixed table layout in CSS is a layout option where the table’s layout algorithm is determined by the widths of its columns and the content they contain. It provides a stable structure but may not adapt well to varying content lengths.
How Fixed Table Layout Works?
- With a fixed table layout, the column widths are determined initially by the width of the first row of cells in the table body. Any column widths specified in CSS are then locked in.
- The browser renders the entire table first before rendering the content. This allows it to know the final layout and widths upfront.
- Fixed table layout provides pixel-perfect control over the table design but sacrifices flexibility for varying content lengths.
Note: Column widths cannot be changed later on by the content.
Syntax
table {
table-layout: fixed;
}Example 1: This example illustrates the use of the table-layout property by setting its value as fixed.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Table</title>
</head>
<body>
<div id="mnb">
<h1>GeeksforGeeks</h1>
<h2>table-layout property:fixed</h2>
</div>
<div>
<table class="table">
<tr id="heading">
<th>Course Name</th>
<th>Price</th>
<th>Course Period</th>
</tr>
<tr>
<td>
Machine Learning & Data Science Program
</td>
<td>45000</td>
<td>12 Months</td>
</tr>
<tr>
<td>DSA to Development</td>
<td>25000</td>
<td>6 Months</td>
</tr>
<tr>
<td>Mastering System Design</td>
<td>30000</td>
<td>4 Months</td>
</tr>
</table>
</div>
<br>
</body>
</html>
|
body { width: 100%;
} table { width: 100%;
table-layout: fixed;
border-collapse: collapse;
display: flex;
justify-content: center;
align-items: center;
} th, td { border: 2px solid black;
padding: 5px;
margin-top: 20px;
text-align: center;
} h1 {
color: green;
} #heading { color: green;
background-color: lightgray;
font-weight: bold;
padding: 10px;
} #mnb { display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
} |
Output:
Auto Table Layout
Auto table layout dynamically adjusts column widths based on content, offering flexibility for diverse data lengths but can lead to less predictable table dimensions. The auto table layout adapts dynamically to varying content sizes.
How does auto table layout work?
- With auto table-layout, the browser analyzes all cells in a column and calculates the optimal width for each column dynamically based on the longest unbreakable content.
- The browser does not render the entire table upfront. It calculates widths row by row as the content is processed.
- It provides less control over the exact appearance since widths can shift as content changes.
Note: Later changes to content, like adding longer text, can cause columns to resize on the fly.
Syntax
table {
table-layout: auto;
}Example: This example illustrates the use of the table-layout property by setting its value as auto.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Table</title>
</head>
<body>
<div id="mnb">
<h1>GeeksforGeeks</h1>
<h2>table-layout property:auto</h2>
</div>
<div>
<table class="table">
<tr id="heading">
<th>Course Name</th>
<th>Price</th>
<th>Course Period</th>
</tr>
<tr>
<td>Machine Learning & Data Science Program</td>
<td>45000</td>
<td>12 Months</td>
</tr>
<tr>
<td>DSA to Development</td>
<td>25000</td>
<td>6 Months</td>
</tr>
<tr>
<td>Mastering System Design</td>
<td>30000</td>
<td>4 Months</td>
</tr>
</table>
</div>
<br>
</body>
</html>
|
table { width: 100%;
table-layout: auto;
border-collapse: collapse;
display: flex;
justify-content: center;
align-items: center;
} th,td { border: 2px solid black;
padding: 5px;
margin-top: 20px;
text-align: center;
} h1 {
color: green;
} #heading { color: green;
background-color: lightgray;
font-weight: bold;
padding: 10px;
} #mnb { display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
} |
Output:
Difference between Fixed Table Layout and Auto Table Layout
|
Property |
fixed |
auto |
| Rendering Method | The browser renders the entire table layout upfront before the content. | The browser calculates widths row by row as content is processed. |
| Flexibility | Less flexible for varying length content. | More adaptable to different content lengths in each cell. |
| Performance | Faster rendering since the layout is pre-determined. | Slower rendering as widths need recalculating for each row. |
| Use Cases | Useful for fixed reports, and dashboards with alignment needs. | Better for content-driven sites needing dynamic flexibility. |