HTML의 테이블 행에 둥근 모서리를 추가하는 방법은 무엇입니까?

테두리 반경을 사용하여 표 행 스타일 지정

HTML 표에서 요소는 테이블 행을 나타냅니다. border-collapse를 사용하여 테이블 행에 단색 테두리를 추가할 수 있지만 행에 둥근 모서리를 추가하는 것은 어렵습니다.

이 제한을 극복하려면 다음 CSS 스타일을 사용할 수 있습니다.

<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>

이러한 스타일은 다음을 수행합니다.

• 테두리 축소 속성을 분리로 설정하여 테이블 내부에 테두리를 유지합니다. 셀.
• 에 실선 테두리를 적용합니다.
• 대부분의 요소에 대해 위쪽 및 왼쪽 테두리를 억제합니다.
• 첫 번째 행의 왼쪽 상단과 오른쪽 상단에 둥근 모서리를 적용합니다.
• 마지막 행의 왼쪽 하단과 오른쪽 하단에 둥근 모서리를 적용합니다.
• 의 상단 테두리를 복원합니다. 첫 번째 행의 요소와 첫 번째 열의 요소입니다.

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