Difference Between Fixed and Auto Table Layout in CSS

CSS

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:

gif

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.

HTML

<!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>

CSS

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.

Suggest improvement

Difference between relative , absolute and fixed position in CSS

Share your thoughts in the comments

Difference Between Fixed and Auto Table Layout in CSS

Fixed Table Layout

How Fixed Table Layout Works?

Syntax

HTML

CSS

Auto Table Layout

How does auto table layout work?

Syntax

HTML

CSS

Difference between Fixed Table Layout and Auto Table Layout

Similar Reads

Difference Between Fixed and Auto Table Layout in CSS

Fixed Table Layout

How Fixed Table Layout Works?

Syntax

HTML

CSS

Auto Table Layout

How does auto table layout work?

Syntax

HTML

CSS

Difference between Fixed Table Layout and Auto Table Layout

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?