테두리 반경을 테이블 행에 직접 적용할 수 없는 경우 CSS를 사용하여 전체 테이블의 둥근 모서리를 어떻게 얻을 수 있습니까?

테이블 행에 테두리 반경 적용

많은 개발자가 테이블 행의 모양을 사용자 정의하려고 할 때 어려움에 직면합니다( ). tr 요소에 border-radius를 적용하려고 할 때 이러한 문제 중 하나가 발생합니다.

이 문제를 해결하려면 border-radius가 테이블 내의 개별 셀()에만 적용될 수 있다는 점을 이해하는 것이 중요합니다. , 행이나 테이블 자체가 아닙니다. 그러나 전체 테이블의 모서리를 둥글게 만드는 영리한 솔루션이 있습니다.

CSS 스타일링

핵심 비결은 테두리를 사용하여 각 셀의 테이블 테두리를 분리하는 것입니다. -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 예

CSS 스타일 규칙이 정의되면 이를 표에 적용하는 것은 간단합니다.

<code class="html"><table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table></code>

이 솔루션은 개별 셀을 빌딩 블록으로 변환하여 둥근 모서리를 포함하여 테이블의 모양을 완벽하게 제어할 수 있습니다.

위 내용은 테두리 반경을 테이블 행에 직접 적용할 수 없는 경우 CSS를 사용하여 전체 테이블의 둥근 모서리를 어떻게 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!