border-collapse セル境界線の表示形式コピペで使えるHTML+CSS

border-collapseプロパティの概要
値
border-collapseを使ったデザイン

border-collapseプロパティの概要

表のセル境界線の表示形式CSS

border-collapse

目的

表のセル境界線について、分離するか、分離しないか、表示形式を指定。

使用

<table>

値

borderの太さを2pxとした表を作成して比較。

border-collapse: separate;

太さ2pxのborderですが、separateのため分離し、見かけ上4pxの太さになる。

1行目1列目	1行目2列目	1行目3列目
2行目1列目	2行目2列目	2行目3列目

style属性で記述

<table style="border-collapse: separate; width: 80%; margin: auto; border: solid 2px #404040; text-align: center;">
  <tbody>
    <tr>
      <td style="border: solid 2px #404040;">1行目1列目</td>
      <td style="border: solid 2px #404040;">1行目2列目</td>
      <td style="border: solid 2px #404040;">1行目3列目</td>
    </tr>
    <tr>
      <td style="border: solid 2px #404040;">2行目1列目</td>
      <td style="border: solid 2px #404040;">2行目2列目</td>
      <td style="border: solid 2px #404040;">2行目3列目</td>
    </tr>
  </tbody>
</table>

border-collapse: collapse;

太さ2pxのborderが、隣り合うセル同士で重なって奇麗に表示される。

1行目1列目	1行目2列目	1行目3列目
2行目1列目	2行目2列目	2行目3列目

style属性で記述

<table style="border-collapse: collapse; width: 80%; margin: auto; border: solid 2px #404040; text-align: center;">
  <tbody>
    <tr>
      <td style="border: solid 2px #404040;">1行目1列目</td>
      <td style="border: solid 2px #404040;">1行目2列目</td>
      <td style="border: solid 2px #404040;">1行目3列目</td>
    </tr>
    <tr>
      <td style="border: solid 2px #404040;">2行目1列目</td>
      <td style="border: solid 2px #404040;">2行目2列目</td>
      <td style="border: solid 2px #404040;">2行目3列目</td>
    </tr>
  </tbody>
</table>

table要素でborderを指定せず、border-collapseがseparateの場合

1行目1列目	1行目2列目	1行目3列目
2行目1列目	2行目2列目	2行目3列目

外周については2pxであるが、内部のセル同士は重なって表示されるため4pxになってしまう。

style属性で記述

<table style="border-collapse: collapse; width: 80%; margin: auto; border: text-align: center;">
  <tbody>
    <tr>
      <td style="border: solid 2px #404040;">1行目1列目</td>
      <td style="border: solid 2px #404040;">1行目2列目</td>
      <td style="border: solid 2px #404040;">1行目3列目</td>
    </tr>
    <tr>
      <td style="border: solid 2px #404040;">2行目1列目</td>
      <td style="border: solid 2px #404040;">2行目2列目</td>
      <td style="border: solid 2px #404040;">2行目3列目</td>
    </tr>
  </tbody>
</table>