table-layout

Overview

The table-layout property is used to control the layout algorithm applied to tables. It provides two layout modes: auto and fixed. These options specify how to size and lay out tables and their rows, cells, and columns. Moreover, the sizing and layout are affected by the applied CSS, the user agent, and the content within each table cell.

Examples and Usage

Let's demonstrate the use of table-layout with both the auto and fixed values.

HTML Structure

<!-- Auto Table Layout -->
<table class="auto-tblayout">
  <caption>Example - Auto</caption>
  <tr>
    <th>Name</th>
    <td>Brendan Eich</td>
  </tr>
  <tr>
    <th>Email</th>
    <td>[email protected]</td>
  </tr>
</table>
<br>
<!-- Fixed Table Layout -->
<table class="fixed-tblayout">
  <caption>Example - Fixed</caption>
  <tr>
    <th>Name</th>
    <td>Brendan Eich</td>
  </tr>
  <tr>
    <th>Email</th>
    <td>[email protected]</td>
  </tr>
</table>

CSS Styling

table {
  width: 250px;
}

table,
tr,
th,
td {
  border: 1px solid darkblue; /* Setting border style for table elements */
}

.auto-tblayout {
  table-layout: auto; /* Setting table layout to auto for this table */
}

.fixed-tblayout {
  table-layout: fixed; /* Setting table layout to fixed for this table */
}

td {
  width: 50%; /* Setting the width of table data cells */
}

In the above examples, both tables have the same HTML structure but are styled differently. The .auto-tblayout table uses the auto value for the table-layout property, which allows the browser to adjust the cell widths based on the content.

On the other hand, the .fixed-tblayout table uses the fixed value, which sets the cell widths based on the first row of cells, regardless of the content size. This means that the width of table cells does not change to accommodate the content in the fixed table layout.

Next, let's examine a potential, practical use case of the fixed value with a larger table.

HTML Structure

<table class="team-members">
  <thead>
    <tr>
      <th class="col-name">Name</th>
      <th class="col-role">Role</th>
      <th class="col-email">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>Developer</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>Designer</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Emma Johnson</td>
      <td>Project Manager</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

CSS Styling

tr,
th,
td {
  border: 2px solid black; /* Setting border style for table elements */
}

.team-members {
  /* Setting layout to fixed for uniform column widths */
  table-layout: fixed;
  /* Table width to span the entire container */
  width: 100%;
  /* Prevents line breaks within the cells */
  white-space: nowrap;
}

/* Widths of the first row cells determine column widths */
.first-row-name {
  width: 40%;
}
.first-row-role {
  width: 30%;
}
.first-row-email {
  width: 20%;
}

.team-members td {
  /* Prevents content from wrapping to the next line */
  white-space: nowrap;
  /* Hides any content that overflows the cell boundaries */
  overflow: hidden;
  /* Shows an ellipsis when the content overflows */
  text-overflow: ellipsis;
}

.team-members th {
  /* Distinct look for the table headers */
  background: orange;
  color: white;
}

.team-members td,
.team-members th {
  /* Aligns the text to the left */
  text-align: left;
  /* Adds some padding for better readability */
  padding: 4px 8px;
}

With table-layout: fixed, the team-members class sets a consistent structure for the table. The layout depends on the first row of cells, simplifying the table's design.

• The property white-space: nowrap stops line breaks in the cells. This keeps each cell's content on a single line for a neat appearance. Although it might seem redundant for short content like names or job titles, this property becomes invaluable when the table contains more lengthy tabular data such as detailed descriptions or titles.

• The classes first-row-name, first-row-role, and first-row-email connect to the cells in the first row. Setting their width to 40%, 30%, and 20% of the table width forms proportionally sized columns. In a fixed layout, the first row's cells dictate the column width, ensuring the table keeps its proportions regardless of the content length in subsequent rows.

• For handling potential overflow, especially in cases of extensive text entries, we use white-space: nowrap, overflow: hidden, and text-overflow: ellipsis on the team-members td rule. This treatment prevents content from wrapping to the next line or spilling out of the cell. Instead, it truncates extra content, with an ellipsis (...) hinting at unseen content. While not necessary for short text like this, these overflow control properties are excellent precautions for dealing with more expansive content.

After setting a distinct style for the table headers with an orange background and white text, we align the text to the left and add padding inside the cells using text-align: left and padding: 4px 8px properties. These enhancements improve readability and elevate the table's overall aesthetics.

Values

The table-layout property accepts the following values:

Associated Properties

• width
• overflow
• border-collapse
• border-spacing
• empty-cells
• display

Tips and Tricks

• Using table-layout: fixed can lead to faster rendering of tables, especially for larger tables, as the browser doesn't need to read through all the content to calculate the optimal column widths.

• When using table-layout: fixed, be aware that the widths of cells in subsequent rows do not affect the column widths. This can lead to cell content overflowing its container if the content is wider than the specified width.

• table-layout: auto is more flexible in terms of content size as it adjusts to fit the contents of the cells. However, it might lead to unexpected layout results if the content size varies significantly between rows.

Browser Compatibility

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers. (see more specifics in the Useful Resources below)

Useful Resources

Can I use: table-layout

CSS 2.2 Specification on table-layout

W3C's Editor's Draft of CSS Table Module Level 3: table-layout