Tables

Takumi lays out display: table as a grid, so every row shares one set of column tracks. Column widths follow Blink's table width algorithm, approximately.

<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>

What worksCopy Anchor Link

• <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 and rowSpan props both work.
• caption renders above the table, or below it with caption-side: bottom.
• A row's background is copied to cells without their own, so zebra stripes and header bands work. The border-spacing gaps stay unpainted.
• A block-level table with width: auto shrinks to fit its content. In a flex or grid container, it stretches.
• Columns share the table's width by their content. 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 Chrome does. baseline cells line up their first lines across a row.
• Paged PDF output splits rows across pages. Columns keep the same positions on every page.

Cells keep their box. Padding, borders, and backgrounds cover the cell's full grid area, including rows spanned by rowspan.

Where it driftsCopy Anchor Link

Upstream table layoutCopy Anchor Link

Takumi lays out flex and grid with Taffy, which has no table algorithm yet. DioxusLabs/taffy#1094 proposes one. Takumi uses the grid-based approach above.