테두리 간격을 사용하지 않고 테이블의 행 사이에 간격을 추가하는 방법은 무엇입니까?

표 행 간격

표 행 사이에 세로 간격을 추가하면 가독성과 시각적 매력이 향상됩니다. border-spacing은 이 목적에 이상적인 속성처럼 보일 수 있지만 표 셀 사이의 간격에만 영향을 미칩니다. 행 간격을 확보하려면 대체 솔루션을 모색해야 합니다.

핵심은 개별 테이블 데이터 셀( 요소)의 패딩을 조정하는 데 있습니다. CSS 솔루션은 다음과 같습니다.

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

이 코드에서는 "spaceUnder" 클래스가 있는 테이블 행의 직계 하위 항목(>)을 대상으로 합니다. 이는 중첩된 표 시나리오에 유용할 수 있는 선택적 간격을 허용합니다.

"padding-bottom" 속성은 셀 내용 아래의 세로 간격을 정의합니다. 원하는 행 간격을 얻으려면 이 값을 원하는 대로 조정하세요. 셀 아래쪽을 패딩하여 셀과 그 아래 행 사이에 간격을 효과적으로 만듭니다.

따라서 이 경우 테두리 간격을 적용할 수 없지만 패딩은 행 간격을 제어하는 ​​효과적인 수단을 제공합니다. 테이블에.

위 내용은 테두리 간격을 사용하지 않고 테이블의 행 사이에 간격을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!