HTML で表の行間に垂直方向のスペースを追加するにはどうすればよいですか?

HTML テーブルのスペース分離: 総合ガイド

Web 開発者として、私たちは構造化された方法でデータを表示するためにテーブルを操作することがよくあります。ただし、ブラウザーが通常提供するものを超えて、テーブルの行間に追加の垂直方向の分離が必要な状況が発生する場合があります。これは CSS を使用して実現できますか?

表の行間隔の CSS

よくある誤解の 1 つは、CSS プロパティの border-spacing を使用して表の間に垂直方向のスペースを追加できるということです。行。テーブルのセル間の間隔は調整されますが、行間の垂直方向の距離には影響しません。

解決策: パディングで救済

テーブルの行間にスペースを作成するには、重要なのは、表の個々のセルにパディングを適用することです ()。次の CSS コードを考えてみましょう。

tr.spaceUnder>td {
  padding-bottom: 1em;
}

クラス spaceUnder を持つ tr 行内の td 要素は、1em の下部パディングを受け取り、効果的に行をさらに離します。これにより、クリーンで整理されたテーブル構造を維持しながら、選択した行の間に垂直方向のスペースを作成できます。

追加の考慮事項

このソリューションは tr の直接の子に対してのみ機能することに注意してください。要素。これにより、以下のコードに示すように、セクション間の間隔が異なる入れ子になったテーブルを作成できます。

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

以上がHTML で表の行間に垂直方向のスペースを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。