CSS를 사용하여 표 셀에 둥근 모서리를 추가하는 방법은 무엇입니까?

표 셀에 테두리 반경 적용

표 행(tr)에 둥근 모서리를 추가하려면 다음 접근 방식을 고려하세요.

• CSS 제한 사항: tr 또는 테이블 요소에 border-radius를 직접 적용할 수 없다는 점에 유의하세요. 대신 개별 표 셀(td)에 적용해야 합니다.
• 셀 테두리 및 안쪽 여백 분리:

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

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

• 모서리 스타일:

<code class="css">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; }</code>

• 상단 및 왼쪽 셀의 테두리 스타일:

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

이 기술 원하는 테두리와 간격을 유지하면서 테이블에 둥근 모서리를 만들 수 있습니다.

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