Border Collapse

Kawal runtuhan sempadan jadual

Sintaks

layout="border:[value]"

Nilai

Nilai	CSS Output	Huraian
collapse	border-collapse: collapse	Runtuhkan sempadan
separate	border-collapse: separate	Asingkan sempadan

Contoh

<table layout="border:collapse">Collapsed table</table>

Pratonton

Runtuh Sempadan

layout="border:collapse" - Sempadan jadual runtuh menjadi satu baris

A1	A2
B1	B2

Lihat Kod

<table layout="border:collapse" visual="border:1 border:neutral-300 dark:border:neutral-700" style="width: 100%;">
  <tbody>
    <tr>
      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">A1</td>
      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">A2</td>
    </tr>
    <tr>
      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">B1</td>
      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">B2</td>
    </tr>
  </tbody>
</table>

Asingkan Sempadan

layout="border:separate" - Sempadan jadual diasingkan (lalai)

A1	A2
B1	B2

Lihat Kod

<table layout="border:separate" visual="border:1 border:neutral-300 dark:border:neutral-700" style="width: 100%; border-spacing: 4px;">
  <tbody>
    <tr>
      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">A1</td>
      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">A2</td>
    </tr>
    <tr>
      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">B1</td>
      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">B2</td>
    </tr>
  </tbody>
</table>