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 중국어 웹사이트의 기타 관련 기사를 참조하세요!