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 サイトの他の関連記事を参照してください。