HTML의 테이블 행에 테두리 반경을 적용하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

HTML의 테이블 행에 테두리 반경을 적용하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-10-28 07:12:30

원래의

336명이 탐색했습니다.

How to Apply Border Radius to Table Rows in HTML?

표 행에 테두리 반경을 적용하는 방법

개발자는 HTML 표에 스타일을 지정할 때 표 행()에 스타일을 적용하려고 할 때 제한 사항에 직면하는 경우가 많습니다. border-collapse로 테두리 스타일을 설정하는 동안 테이블 내의 요소는

테이블 행에 테두리 반경(-moz-border-radius 또는 최신 테두리 반경)을 적용하려고 할 때 일반적인 문제가 발생합니다. 안타깝게도 이 속성은 요소.

해결책:

이러한 제한 사항을 고려하여 테이블 행의 모서리를 둥글게 만드는 해결 방법이 필요합니다. 해결책은 개별 요소:

<code class="css">table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  border: solid 1px #000;
  border-style: none solid solid none;
  padding: 10px;
}

tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }

tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }

tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }</code>

로그인 후 복사

이 방법은 각 행의 시작과 끝 부분에 있는 요소입니다. border-collapse: 별도의 속성은 각 셀에 테두리를 개별적으로 적용하여 원하는 스타일 효과를 얻을 수 있으므로 매우 중요합니다.

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