CSS Table-layout

The table-layout property in CSS is used to control the layout of tables. It defines how table columns, rows, and cells are sized, and how the table width is calculated.

Syntax

table {
    table-layout: auto | fixed | inherit;
}

Try It Now

Property Values

  • auto (default):
    • The column width is determined by the content of the cells. The table’s width is automatically adjusted based on the content of its cells.
    • This makes the table more dynamic but can lead to uneven column widths if the content varies greatly.
  • fixed:
    • The table’s layout is fixed, meaning the column width is set by the width of the table or the first row’s cells.
    • Additional rows are not allowed to change the column width, making the layout faster to render and more consistent in appearance.
    • If no explicit width is provided, the columns are equally divided.
  • inherit:
    • The table-layout value is inherited from the parent element.

Examples

Example 1: auto Layout (Default)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto; /* This is the default value */
        }
        td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>Short</td>
            <td>This is a longer content that will affect the table width.</td>
        </tr>
    </table>
</body>
</html>

Try It Now

In this example, the second column will be wider because it contains more content. The table width adjusts to fit the content dynamically.

Example 2: fixed Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }
        td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>Short</td>
            <td>This is a longer content that will be truncated.</td>
        </tr>
    </table>
</body>
</html>

Try It Now

With table-layout: fixed, both columns will be equal in width (if no widths are specified), and the content in the second column may be truncated if it doesn’t fit.

Use Cases

  1. auto:
    • Best used when the table content can vary in size and you want the table to adjust dynamically to fit the content.
    • Suitable for tables with varying or unpredictable content lengths.
  2. fixed:
    • Useful for performance optimization because it reduces the need for recalculations of column widths.
    • Best when you want a consistent layout, and content truncation is acceptable.
    • Often used in tables with a known structure or fixed-width content.

Tips

  • Use table-layout: auto when you want flexibility and content determines the column width.
  • Use table-layout: fixed for better performance and a more predictable layout, especially when dealing with large datasets or when the table structure is known beforehand.
  • Combine with width settings on columns or cells to fine-tune the appearance and ensure that important data is always visible.

Understanding table-layout helps in creating responsive, efficient, and visually appealing tables, which are essential for displaying tabular data effectively on web pages.