CSS を使用して表の行間にスペースを追加する方法-CSSチュートリアル-php.cn

CSS を使用して表の行間にスペースを追加する方法

Susan Sarandon

リリース： 2024-11-11 14:37:02

オリジナル

181 人が閲覧しました

How to Add Space Between Rows in a Table Using CSS?

テーブルの行間にスペースを作成する方法

質問:

テーブルの行間にスペースを追加することはできますか? CSSを使用したテーブル?次のコードは望ましい結果を生成しません:

tr.classname {
  border-spacing: 5em;
}

ログイン後にコピー

回答:

テーブル内の行間にスペースを作成するには、td でパディングを使用する必要があります。要素。次の CSS コードを使用できます。

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

ログイン後にコピー

このコードでは、tr.spaceUnder > td セレクターは、spaceUnder クラスの tr 要素の直接の子である td 要素にのみパディングを適用します。これにより、行間の間隔に影響を与えることなく、ネストされたテーブルを使用できるようになります。

例:

<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>

ログイン後にコピー

出力:

A	B

C	D
E	F

以上がCSS を使用して表の行間にスペースを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。