Table

Tables with headers, borders, cell spanning, and styling.

<Table className="border">
  <Thead>
    <Tr>
      <Th className="border p-2">Name</Th>
      <Th className="border p-2">Price</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td className="border p-2">Widget</Td>
      <Td className="border p-2">$10</Td>
    </Tr>
  </Tbody>
</Table>

Components

Component	Description
`Table`	Table container
`Thead`	Header rows, repeated at the top of every page the table continues on
`Tbody`	Body section
`Tr`	Table row
`Th`	Header cell (bold by default)
`Td`	Data cell

Props

Prop	Type	Description
`children`	`ReactNode`	Thead, Tbody, Tr elements
`className`	`string`	Tailwind classes
`width`	`"full"` \| `"auto"` \| `MeasurementValue`	Table width
`columns`	`ColumnWidth[]`	One width per column: `"3cm"`, `"25%"` or `"1fr"`
`styleName`	`string`	A table style from the base document

Tr

Prop	Type	Description
`children`	`ReactNode`	Th or Td elements
`className`	`string`	Tailwind classes
`height`	`MeasurementValue`	Row height

Th / Td

Prop	Type	Description
`children`	`ReactNode`	Cell content
`className`	`string`	Tailwind classes
`colSpan`	`number`	Horizontal span
`rowSpan`	`number`	Vertical span

Width

// Full width (default)
<Table width="full">

// Shrink to content
<Table width="auto">

// Fixed width
<Table width="4in">
<Table width="10cm">

Borders

All borders

<Table className="border">
  <Tbody>
    <Tr>
      <Td className="border">Cell</Td>
    </Tr>
  </Tbody>
</Table>

Border colors

<Td className="border border-gray-300">Light border</Td>
<Td className="border border-blue-500">Blue border</Td>

Border thickness

<Td className="border">Normal</Td>
<Td className="border-2">Thicker</Td>
<Td className="border-4">Even thicker</Td>

Individual sides

<Td className="border-b">Bottom only</Td>
<Td className="border-t border-b">Top and bottom</Td>

Padding

<Td className="p-2">All sides</Td>
<Td className="px-4 py-2">Horizontal and vertical</Td>
<Td className="pt-2 pb-4 pl-2 pr-2">Individual sides</Td>

Background colors

<Th className="bg-gray-100">Header</Th>
<Td className="bg-green-50">Highlighted cell</Td>
<Tr className="bg-yellow-50">
  <Td>Entire row highlighted</Td>
</Tr>

Alignment

Horizontal

<Td className="text-left">Left</Td>
<Td className="text-center">Center</Td>
<Td className="text-right">Right</Td>

Vertical

<Td className="align-top">Top</Td>
<Td className="align-middle">Middle</Td>
<Td className="align-bottom">Bottom</Td>

Column span

<Table className="border">
  <Thead>
    <Tr>
      <Th colSpan={2} className="border p-2 text-center">
        Sales Report
      </Th>
    </Tr>
    <Tr>
      <Th className="border p-2">Product</Th>
      <Th className="border p-2">Revenue</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td className="border p-2">Widget</Td>
      <Td className="border p-2">$1,000</Td>
    </Tr>
  </Tbody>
</Table>

Row span

<Table className="border">
  <Tbody>
    <Tr>
      <Td rowSpan={3} className="border p-2 align-middle">
        Electronics
      </Td>
      <Td className="border p-2">Laptop</Td>
      <Td className="border p-2">$999</Td>
    </Tr>
    <Tr>
      <Td className="border p-2">Tablet</Td>
      <Td className="border p-2">$499</Td>
    </Tr>
    <Tr>
      <Td className="border p-2">Phone</Td>
      <Td className="border p-2">$799</Td>
    </Tr>
  </Tbody>
</Table>

No placeholder cells needed for spanned rows.

Rich content

Cells can contain formatted text:

<Td className="border p-2">
  <Text className="font-bold">$1,234</Text>
  <Text className="text-green-600 text-sm"> (+12%)</Text>
</Td>

Row height

<Tr height="0.5in">
  <Td>Fixed height row</Td>
</Tr>

Full example

<Table className="border" width="full">
  <Thead>
    <Tr className="bg-gray-100">
      <Th className="border p-2">Product</Th>
      <Th className="border p-2 text-right">Q1</Th>
      <Th className="border p-2 text-right">Q2</Th>
      <Th className="border p-2 text-right">Total</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td className="border p-2 font-bold">Widget A</Td>
      <Td className="border p-2 text-right">$12,000</Td>
      <Td className="border p-2 text-right">$15,000</Td>
      <Td className="border p-2 text-right font-bold">$27,000</Td>
    </Tr>
    <Tr>
      <Td className="border p-2 font-bold">Widget B</Td>
      <Td className="border p-2 text-right">$8,500</Td>
      <Td className="border p-2 text-right">$9,200</Td>
      <Td className="border p-2 text-right font-bold">$17,700</Td>
    </Tr>
    <Tr className="bg-gray-50">
      <Td className="border p-2 font-bold">Total</Td>
      <Td className="border p-2 text-right font-bold">$20,500</Td>
      <Td className="border p-2 text-right font-bold">$24,200</Td>
      <Td className="border p-2 text-right font-bold text-green-600">$44,700</Td>
    </Tr>
  </Tbody>
</Table>

Spacing

mt-* and mb-* add space above and below the table, like on a paragraph:

<Table className="mt-4 mb-6">

Two tables in a row are kept apart by a 1pt paragraph; Word would otherwise merge them into one table.

Column widths

<Table columns={["3cm", "1fr", "2fr", "20%"]}>

Lengths and percentages (of the table width) are fixed; fr columns share what is left, like CSS Grid. Without columns, columns are equal. With them, the table keeps these widths in Word instead of fitting its content.

Page breaks

Rows in Thead repeat on each page the table continues on and stay with the first body row, so a title never sits alone at the bottom of a page. Tailwind’s break utilities control the rest:

Class	On `Tr`	On `Table`
`break-inside-avoid`	The row does not split across pages	Keeps the whole table on one page when it fits
`break-after-avoid`	Keeps the row on the same page as the next row	—

<Table>
  <Thead>
    <Tr>
      <Td colSpan={2} className="font-bold">{group.title}</Td>
    </Tr>
  </Thead>
  <Tbody>
    {rows.map((row) => (
      <Tr key={row.id} className="break-inside-avoid">
        ...
      </Tr>
    ))}
  </Tbody>
</Table>

Structure

A Table accepts only Thead, Tbody and Tr; Thead and Tbody accept only Tr; Tr accepts only Th and Td. Anything else rejects render() with an error instead of being left out of the document.

Limitations

No floating/positioned tables
No table rotation

​Components

​Props

​Table

​Tr

​Th / Td

​Width

​Borders

​All borders

​Border colors

​Border thickness

​Individual sides

​Padding

​Background colors

​Alignment

​Horizontal

​Vertical

​Column span

​Row span

​Rich content

​Row height

​Full example

​Spacing

​Column widths

​Page breaks

​Structure

​Limitations