Table Layout

Control table layout algorithm

Syntax

layout="table:[value]"

Values

Value	CSS Output	Description
auto	table-layout: auto	Auto layout
fixed	table-layout: fixed	Fixed layout

Examples

<table layout="table:fixed">Fixed width columns</table>

Preview

Fixed Table Layout

layout="table:fixed" - Columns have fixed equal widths

Fixed

Column

Widths

View Code

<table layout="table:fixed" style="width: 100%;" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <tbody>
    <tr>
      <td space="p:small" visual="bg:primary text:white">Fixed</td>
      <td space="p:small" visual="bg:primary text:white">Column</td>
      <td space="p:small" visual="bg:primary text:white">Widths</td>
    </tr>
  </tbody>
</table>

Auto Table Layout

layout="table:auto" - Columns adjust to content width

Short

Much Longer Content Here

Med

View Code

<table layout="table:auto" style="width: 100%;" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <tbody>
    <tr>
      <td space="p:small" visual="bg:primary text:white">Short</td>
      <td space="p:small" visual="bg:primary text:white">Much Longer Content Here</td>
      <td space="p:small" visual="bg:primary text:white">Med</td>
    </tr>
  </tbody>
</table>