직접 테두리 반경 적용이 제한된 경우 CSS를 사용하여 테이블 행에 둥근 모서리를 적용하려면 어떻게 해야 합니까?

표 행에 테두리 반경 적용

표 행의 모양을 사용자 정의하는 동안() 테두리 반경을 적용하는 기능 직접적으로 제한될 수 있습니다. 다음은 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>

이 솔루션은 개별 테이블 데이터 셀()의 테두리를 설정하여 행 주위에 원하는 테두리를 형성합니다. border-collapse 및 border-spacing 속성을 사용하면 셀이 분리되고 겹치지 않게 됩니다.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!