Skip to content

Table Layout

Kawal algoritma susun atur jadual

Sintaks

layout="table:[value]"

Nilai

NilaiCSS OutputHuraian
autotable-layout: autoSusun atur automatik
fixedtable-layout: fixedSusun atur tetap

Contoh

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

Pratonton

Susun Atur Jadual Tetap

layout="table:fixed" - Lajur mempunyai lebar tetap sama

FixedColumnWidths
Lihat Kod
html
<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>

Susun Atur Jadual Auto

layout="table:auto" - Lajur menyesuaikan dengan lebar kandungan

ShortMuch Longer Content HereMed
Lihat Kod
html
<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>