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

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

テーブルの行を区切るには、td 要素の padding プロパティを使用します。必要な間隔を提供するには、次の CSS を使用します。

/* Apply padding to td elements that are direct children of tr elements with class spaceUnder. */
tr.spaceUnder > td {
  padding-bottom: 1em;
}

このコードは、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>

提供された CSS では、行 CD の下にスペースがあり、行 AB と行 EF は影響を受けません。 .

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