Tables

Takumi renders display: table by rewriting the table into a grid before layout, so every row shares one set of column tracks. It is a naive implementation, not the CSS table algorithm. This page lists what carries over and where it drifts.

What works

• <table>, <thead>, <tbody>, <tfoot>, <tr>, <td>, <th>, and <caption> have element presets in HTML and JSX.
• Header groups render first and footer groups last, whatever the source order.
• colspan and rowspan span tracks. The HTML attributes and the JSX colSpan / rowSpan casings both count.
• caption renders above the table, or below it with caption-side: bottom.
• A row's background is copied to cells that have none of their own, so zebra striping and header bands work. The border-spacing gaps stay unpainted.
• border-spacing defaults to 2px. Set gap on the table to change it.
• Paged PDF output splits rows across pages. Column positions stay identical on every page.

<table style={{ width: "100%" }}>
  <thead>
    <tr style={{ background: "#e2e8f0" }}>
      <th>Name</th>
      <th style={{ width: "80px" }}>Qty</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Wireframe kit</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Where it drifts

The width drift appears when the table is wider than its content and the free space splits across two or more auto columns, fixed-width neighbors included. Declare a width on a single-column cell in each column to keep the columns close to Chrome. A width on a spanning cell does not size a column.

Upstream table layout

Native CSS table layout for taffy is in progress at DioxusLabs/taffy#1094, with column width and row height distribution ported from Blink. Once it lands, Takumi switches to it. That closes the column width and baseline drift, with no change to the properties on this page.