표 행에 테두리 반경 적용
표 행의 모양을 사용자 정의하는 동안() 테두리 반경을 적용하는 기능 직접적으로 제한될 수 있습니다. 다음은 CSS 스타일을 사용하는 해결 방법입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <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 속성을 사용하면 셀이 분리되고 겹치지 않게 됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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 중국어 웹사이트의 기타 관련 기사를 참조하세요!