MENU
  1. ホーム
  2. CSS
  3. border-collapse

border-collapse

CSS
2023.12.31

border-collapseプロパティは、表組みボーダーの取り扱いを制御するためのプロパティです。

border-collapseの説明図
border-collapseプロパティ
記法

.クラス名　{
　border-collapse : 表示形式;
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>border-collapseプロパティ</title>
  </head>

  <body>
    <p>border-collapse：collapse</p>
    <p>セル境界線を重ねて表示</p>
    <table class="border-collapse">
      <thead>
        <tr>
          <th>見出しA</th>
          <th>見出しB</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>セルの内容A</td>
          <td>セルの内容B</td>
        </tr>
      </tbody>
    </table>
    <hr />
    <p>border-collapse：separate</p>
    <p>セル境界線を分離</p>
    <table class="border-separate">
      <thead>
        <tr>
          <th>見出しA</th>
          <th>見出しB</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>セルの内容A</td>
          <td>セルの内容B</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
.border-collapse {
  border-collapse: collapse;
}
.border-separate {
  border-collapse: separate;
}
td,
th {
  border: 1px solid black;
  padding: 8px;
}
出力結果

border-collapse：collapse

セル境界線を重ねて表示

見出しA 見出しB
セルの内容A セルの内容B

border-collapse：separate

セル境界線を分離

見出しA 見出しB
セルの内容A セルの内容B
CSS