CSS를 사용하여 테이블 행 사이에 공간을 추가하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS를 사용하여 테이블 행 사이에 공간을 추가하는 방법은 무엇입니까?

Mary-Kate Olsen

풀어 주다： 2024-11-10 06:30:02

원래의

925명이 탐색했습니다.

How to Add Space Between Table Rows with 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!