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

border-collapseプロパティの概要

<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の太さになる。

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が、隣り合うセル同士で重なって奇麗に表示される。

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の場合

外周については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を実装した汎用性の高い設計も解説します。

programming-cafe.com