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

スポンサーリンク

border-collapseプロパティの概要

表のセル境界線の表示形式CSS
border-collapse
目的表のセル境界線について、分離するか、分離しないか、表示形式を指定。
使用<table>
関連table-layout border
初期border-collapse : separate
1行目1列目1行目2列目1行目3列目
2行目1列目2行目2列目2行目3列目
<table style="border-collapse: separate; width: 80%; margin: auto; border: solid 1px #404040; text-align: center;">
  <tbody>
    <tr>
      <td style="border: solid 1px #404040;">1行目1列目</td>
      <td style="border: solid 1px #404040;">1行目2列目</td>
      <td style="border: solid 1px #404040;">1行目3列目</td>
    </tr>
    <tr>
      <td style="border: solid 1px #404040;">2行目1列目</td>
      <td style="border: solid 1px #404040;">2行目2列目</td>
      <td style="border: solid 1px #404040;">2行目3列目</td>
    </tr>
  </tbody>
</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>

border-collapseを使ったデザイン

table 角丸の表を作成する コピペで使えるHTML+CSS
CSSのborder-radiusを使ってtable表の外周について角を丸くします。しっかりと丸みを持たせるためにテーブル内のセルをどのように処理するかについて、first-childとlast-childを実装した汎用性の高い設計も解説します。