테이블 주위에 곡선 테두리를 생성하는 방법은 무엇입니까?

Question

테이블 주위에 구부러진 테두리를 만드는 가장 좋은 방법은 무엇입니까?

border-radius 속성을 사용하면 단순히 테이블의 바깥 쪽 부분에 곡선 테두리를 넣을 수 있습니다. 그러나 개별 셀은 이중 테두리를 생성합니다.

<table class="round" with="100%" height="200"> 
<tr> 
    <td>Text</td> 
</tr> 
</table> 

그 CSS는 단지 세포 주위에 테두리가 둥근 테이블을 생성

.round{ 
    border: 1px solid black; 
    border-radius: 20px; 
} 

이 정의된다. 우리가 셀 주위에 경계선을 만들려고하면

.round td{ 
    border: 1px solid black; 
} 

우리는 이중 테두리를 얻습니다.

해결 방법이 있습니까?

Answer 1

모서리 셀에 테두리 반경을 대신 지정하십시오.

.tr:first-child .td:first-child{ 
    border-top-left-radius: 20px; 
} 
.tr:first-child .td:first-child{ 
    border-top-right-radius: 20px; 
} 

.tr:last-child .td:first-child{ 
    border-bottom-left-radius: 20px; 
} 
.tr:last-child .td:first-child{ 
    border-bottom-right-radius: 20px; 
} 

내용에 따라이 셀을 약간 깔고 싶을 수도 있습니다. 또한 공급 업체 접두사가 필요하고 아마 IE 용 javascript 스타일을 적용해야합니다. 또는 파이를 사용하십시오.