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

CSS を使用せずにテーブルの行間にスペースを空ける方法

テーブルの行間にスペースを追加できるかどうか疑問に思っているかもしれません。 CSSを使用して。残念ながら、CSS プロパティの border-spacing では、この望ましい効果が得られません。 border-spacing プロパティは、表のセル間にスペースを追加するだけであり、行間には追加しません。

代わりに、 でパディングを使用する必要があります。要素を使用して行間にスペースを追加します。次の CSS コードを使用できます:

tr.classname td {
  padding-bottom: 5em;
}

これにより、各 の下部に 5em のパディングが追加されます。 内の要素クラスのクラス名を使用します。必要に応じてパディングの量を調整できます。

これがどのように機能するかの例を次に示します。

<table class="classname">
  <tbody>
    <tr>
      <td>Cell A</td>
      <td>Cell B</td>
    </tr>
    <tr>
      <td>Cell C</td>
      <td>Cell D</td>
    </tr>
  </tbody>
</table>

これにより、各行の間に 5em のスペースを持つテーブルが作成されます。

希望する効果に応じて、下部パディングの代わりに上部パディングを使用することもできることに注意してください。

必要な場合は、ネストされたテーブルの行間にスペースを追加するには、次の CSS コードを使用できます。

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

これにより、各 の下部に 1em のパディングが追加されます。 の直接の子である要素。クラス spaceUnder.

の要素

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