Tables

Takumi renders display: table by rewriting the table into a grid, so every row shares one set of column tracks. Column widths follow the CSS table width algorithm as Chrome runs it. 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.
• A block-level auto-width table shrinks to fit its content; in a flex or grid container it still stretches. Columns share the table's width by their content, as in Chrome. Percentage and fixed cell widths constrain their columns.
• border-collapse: collapse merges adjacent borders.
• border-spacing defaults to 2px.
• vertical-align places cell content as in Chrome, and baseline cells line their first lines up across a row.
• 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

Upstream table layout

Native CSS table layout for Taffy is proposed in DioxusLabs/taffy#1094. The PR is open as of September 9, 2026. Takumi currently uses the grid-based approximation described above.