Fixed Table Layout (table-layout: fixed)

Technical Deep Dive & Specifications

Automatic vs. Fixed Layout Specifications

The CSS property table-layout governs the geometric sizing algorithm used by browser layout engines (Blink, Gecko, WebKit):

table {
  table-layout: auto | fixed;
  width: 100%; /* REQUIRED for fixed layout to calculate distribution */
}

+----------------------------------------------------------------------------------------+
|                          TABLE LAYOUT ALGORITHM COMPARISON                             |
+----------------------------------------------------------------------------------------+
| Dimension             | table-layout: auto (Default)    | table-layout: fixed          |
+-----------------------+---------------------------------+------------------------------+
| Time Complexity       | O(N x M) where N=rows, M=cols   | O(1) constant time           |
| Layout Dependencies   | Every cell in the entire table  | Colgroup / 1st row cells only|
| Progressive Rendering | ❌ Blocked until full HTML parse| ✅ Renders rows as they stream|
| Text Truncation (...) | ❌ Fails (cells expand to fit)  | ✅ Native text ellipsis support|
| Column Width Source   | Content length of longest cell  | CSS widths on <col> / row 1  |
| Browser CPU Overhead  | High (frequent layout thrash)   | Minimal / Near zero          |
+----------------------------------------------------------------------------------------+

The Fixed Table Sizing Algorithm

Under the W3C CSS 2.1 Table Specification, when table-layout: fixed is declared:

1. Table Width Requirement: The table element must have an explicit computed width (e.g. width: 100%, width: 1200px, or max-width). If width is auto, the browser falls back to an undefined automatic sizing heuristic.
2. Column Width Determination:
   • The engine checks for widths declared on <col> or <colgroup> elements.
   • If no <col> width exists, the engine checks the widths declared on the cells of the first row (<th> or <td> in <thead> or the first <tr>).
   • Any column without an explicit width divides the remaining table horizontal space equally.
3. Subsequent Rows are Ignored for Sizing: Widths, word lengths, or inline contents in row 2, row 10, or row 10,000 are completely ignored during column geometry computation.

Enforcing Text Truncation with Ellipsis

In standard table-layout: auto, attempting to truncate text with text-overflow: ellipsis fails because the table cell expansion algorithm runs before text overflow calculation. The cell simply expands to accommodate the unbreakable string, pushing other columns off-screen.

With table-layout: fixed, text truncation works cleanly when applied properly to table cells:

/* Truncation on Table Cell */
.fixed-table td.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0; /* Critical reset: forces cell to respect column boundary */
}

+-------------------------------------------------------------------------------+
|                     TEXT ELLIPSIS BOX MECHANICS IN FIXED TABLE                |
+-------------------------------------------------------------------------------+
|  Column Width Locked: 200px                                                   |
|  +-------------------------------------------------------------------------+  |
|  | https://api.production.internal/v2/telemetry/nodes/east-cluster-9012... |  |
|  +-------------------------------------------------------------------------+  |
|  (white-space: nowrap prevents wrapping; text-overflow: ellipsis truncates)   |
+-------------------------------------------------------------------------------+

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 31–32 (table-layout: fixed; width: 100%;): Enables the $O(1)$ fixed table layout engine. Setting width: 100% ensures the browser knows the exact container boundary to distribute column percentages.
• Line 57–63 (<colgroup>): Declares column widths ahead of the DOM data stream. The browser allocates 110px to Time, 90px to Method, 45% to Request URI, 100px to Status, and remaining space to Latency.
• Line 49–54 (.cell-truncate): Combines overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0;. This forces ultra-long API URLs (150+ characters) to truncate with clean ... characters instead of blowing out the table width.
• Line 76 (title="..."): Accessibility best practice: because text is truncated visually, the full unclipped string is provided in the title attribute for native browser tooltips and assistive hover inspection.

Expected Browser Render Output

+---------------------------------------------------------------------------------------------------+
| Time         | Method | Request URI Endpoint                               | Status   | Latency   |
+---------------------------------------------------------------------------------------------------+
| 14:02:18.102 | POST   | https://api.gateway.internal/v3/organizations/o... | 200 OK   | 42 ms     |
+---------------------------------------------------------------------------------------------------+
| 14:02:18.145 | GET    | https://api.gateway.internal/v3/auth/oauth2/tok... | 200 OK   | 18 ms     |
+---------------------------------------------------------------------------------------------------+
| 14:02:18.201 | DELETE | https://api.gateway.internal/v3/sessions/sess_e... | 404 NF   | 8 ms      |
+---------------------------------------------------------------------------------------------------+
*(Columns remain immutably fixed in width; long URLs truncate cleanly with ellipsis)*