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

border-spacing

CSS
2023.12.31

border-spacingプロパティは、HTMLテーブルにおいてセル間の距離を設定するために使用されます。

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

.クラス名　{
　border-spacing: 表ボーダー間隔幅;
}

<!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-spacingプロパティ</title>
  </head>

  <body>
    <table class="border-spacing">
      <thead>
        <tr>
          <th>見出しA</th>
          <th>見出しB</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>セルの内容A</th>
          <th>セルの内容B</th>
        </tr>
      </tbody>
    </table>
  </body>
</html>
.border-spacing {
  border-spacing: 5px 10px;
}
td,
th {
  border: 1px solid black;
  padding: 8px;
}
出力結果
見出しA 見出しB
セルの内容A セルの内容B
CSS