CSS만 사용하여 둥근 테이블 모서리를 얻는 방법은 무엇입니까?

CSS만 사용하여 둥근 테이블 모서리

CSS만 사용하여 HTML 테이블에서 둥근 모서리를 얻으려는 사용자는 테이블의 테두리. 이 문제를 해결하는 포괄적인 접근 방식은 다음과 같습니다.

CSS 구현

table {
  border-collapse: separate;
  border: solid black 1px;
  border-radius: 6px;
}

td, th {
  border-left: solid black 1px;
  border-top: solid black 1px;
}

th {
  background-color: blue;
  border-top: none;
}

td:first-child, th:first-child {
  border-left: none;
}

설명

먼저 테두리 설정- 붕괴: 분리를 사용하면 셀 사이에 테두리가 나타날 수 있습니다. 그런 다음 border 속성은 테이블의 외부 테두리를 정의합니다. border-radius는 둥근 모서리를 만듭니다.

셀과 헤더 내에서 border-left와 border-top은 각각 세로 및 가로 테두리를 지정합니다. 헤더는 둥근 모서리를 표시하기 위해 파란색 배경을 사용합니다. 또한 표의 외부 테두리와 겹치는 것을 방지하기 위해 헤더의 border-top을 제거했습니다.

마지막으로 첫 번째 셀과 헤더의 border-left를 제거하면 불필요한 세로 테두리가 제거됩니다. 결과적으로 테이블 내의 수직 및 수평 테두리를 유지하면서 모든 모서리 셀의 모서리가 둥글게 됩니다.

사용 예

<table>
  <thead>
    <tr>
      <th>Blah</th>
      <th>Fwee</th>
      <th>Spoon</th>
    </tr>
  </thead>
  <tr>
    <td>Blah</td>
    <td>Fwee</td>
    <td>Spoon</td>
  </tr>
  <tr>
    <td>Blah</td>
    <td>Fwee</td>
    <td>Spoon</td>
  </tr>
</table>

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