コード付き解説！Bootstrapでテーブルの行間にスペースを追加する4つの方法

2024-04-02

Twitter Bootstrapでテーブルの行間にスペースを追加する方法

方法はいくつかありますが、ここでは最も簡単な2つの方法を紹介します。

margin-bottom プロパティを使用する

この方法は、テーブルの tr 要素に margin-bottom プロパティを設定することで、行間にスペースを追加します。

table tr {
  margin-bottom: 10px;
}

このコードは、すべての行の下に10ピクセルの余白を追加します。

border-spacing プロパティを使用する

この方法は、テーブルの border-spacing プロパティを設定することで、行間と列間のスペースを同時に調整します。

table {
  border-spacing: 10px;
}

例

以下の例では、上記の2つの方法を使ってテーブルの行間にスペースを追加しています。

<table class="table">
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>性別</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田太郎</td>
      <td>30歳</td>
      <td>男性</td>
    </tr>
    <tr>
      <td>佐藤花子</td>
      <td>25歳</td>
      <td>女性</td>
    </tr>
  </tbody>
</table>

/* 方法1 */
table tr {
  margin-bottom: 10px;
}

/* 方法2 */
table {
  border-spacing: 10px;
}

このコードを実行すると、以下のようになります。

このページでは、Twitter Bootstrapを使ってテーブルの行間にスペースを追加する方法を説明しました。これらの方法を参考に、見やすく読みやすいテーブルを作成してください。

<table class="table">
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>性別</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田太郎</td>
      <td>30歳</td>
      <td>男性</td>
    </tr>
    <tr>
      <td>佐藤花子</td>
      <td>25歳</td>
      <td>女性</td>
    </tr>
  </tbody>
</table>

table tr {
  margin-bottom: 10px;
}

<table class="table">
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>性別</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田太郎</td>
      <td>30歳</td>
      <td>男性</td>
    </tr>
    <tr>
      <td>佐藤花子</td>
      <td>25歳</td>
      <td>女性</td>
    </tr>
  </tbody>
</table>

table {
  border-spacing: 10px;
}

実行結果

方法1:

これらのコードを参考に、ご自身のニーズに合わせてテーブルの行間にスペースを追加してください。

Twitter Bootstrapでテーブルの行間にスペースを追加する他の方法

padding プロパティは、要素の周りの余白を設定します。このプロパティを使って、テーブルの tr 要素の上下に余白を追加することで、行間にスペースを追加することができます。

table tr {
  padding: 5px 0;
}

nth-child セレクターは、要素の子要素のうち、特定の位置にある要素を選択することができます。このセレクターを使って、偶数番目の行のみ、または奇数番目の行のみ、行間にスペースを追加することができます。

table tr:nth-child(even) {
  margin-bottom: 10px;
}

@media クエリは、メディアタイプやデバイスの画面サイズに応じてスタイルを適用することができます。このクエリを使って、モバイルデバイスでは行間にスペースを追加し、デスクトップでは行間にスペースを追加しない、といった設定をすることができます。

@media (max-width: 768px) {
  table tr {
    margin-bottom: 10px;
  }
}

カスタムCSSクラスを作成して、そのクラスに margin-bottom プロパティや padding プロパティを設定することで、特定のテーブルの行間にのみスペースを追加することができます。

<table class="table">
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>性別</th>
    </tr>
  </thead>
  <tbody>
    <tr class="spacer">
      <td>山田太郎</td>
      <td>30歳</td>
      <td>男性</td>
    </tr>
    <tr>
      <td>佐藤花子</td>
      <td>25歳</td>
      <td>女性</td>
    </tr>
  </tbody>
</table>