CSS border-collapse property

表（TABLE）に関するCSSプロパティの使い方をサンプルを交えてご紹介します。

border-collapse

スタイルシート属性 border-collapse は、表（テーブル）の枠線との間の大きさを指定します。

書式

border-collapse: collapse

属性値

collapse

以下の値から選びます。

値	説明
collapse	隣のセルの枠線と重ねて表示
separate	隣のセルの枠線と離して表示（規定値）
inherit	上位のスタイルを継承

使用例と表示サンプル

次に、隣のセルの枠線と離して表示する表の例を示します。

<table border="1" style="border-collapse:separate">
  <tr>
    <td>border-collapse</td>
    <td>separate</td>
  </tr>
</table>

次に、隣のセルの枠線と重ねて表示する表の例を示します。

<table border="1" style="border-collapse:collapse">
  <tr>
    <td>border-collapse</td>
    <td>collapse</td>
  </tr>
</table>

border-spacing

スタイルシート属性border-spacingは、表 (テーブル) の枠線との間の大きさを指定します。

書式

border-spacing: horizontal vertical

属性値

horizontal

横の幅を10pxのように数値と単位で指定します。

vertical

縦の幅を10pxのように数値と単位で指定します。verticalを省略した場合は、縦の幅は横の幅と同じになります。

使用例

<table border="1" style="border-spacing: 30px 15px">
  <tr>
    <td>cell #1</td>
  </tr>
</table>

caption-side

スタイルシート属性caption-sideは、表（テーブル）の見出しの位置を指定します。

書式

caption-side: align

属性値

align

表の見出しの位置を指定します。

値	意味
top	上（規定値）
right	右
bottom	下
left	左
inherit	継承

対応状況

¹ topとbottomのみ対応

使用例

<table border="1" style="caption-side: top">
  <caption>caption</caption>
  <tr>
    <td>cell #1</td>
  </tr>
</table>

<table border="1" style="caption-side: right">
  <caption>caption</caption>
  <tr>
    <td>cell #1</td>
  </tr>
</table>

<table border="1" style="caption-side: bottom">
  <caption>caption</caption>
  <tr>
    <td>cell #1</td>
  </tr>
</table>

<table border="1" style="caption-side: left">
  <caption>caption</caption>
  <tr>
    <td>cell #1</td>
  </tr>
</table>

empty-cells

スタイルシート属性empty-cellsは、表（テーブル）の空のセルの表示方法を指定します。

書式

empty-cells: display

属性値

display

表の空のセルの表示方法を指定します。

値	意味
show	表示する
hide	表示しない
inherit	継承

使用例

<table border="1" style="empty-cells: show">
  <tr>
    <td>cell #1</td>
    <td></td>
    <td>cell #3</td>
  </tr>
</table>

<table border="1" style="empty-cells: hide">
  <tr>
    <td>cell #1</td>
    <td></td>
    <td>cell #3</td>
  </tr>
</table>

table-layout

スタイルシート属性table-layoutは、表（テーブル）の横幅を指定します。

書式

table-layout: layout

属性値

layout

表の横幅を指定します。

値	意味
auto	自動（規定値）
fixed	固定
inherit	上位のスタイルを継承

参考文献

World Wide Web Consortium (2022) CSS 2