2011-05-10 7 views
1

두 번 테두리가있는 표를 만들려면 어떻게해야합니까? 바깥 쪽 테두리는 1 픽셀이고 안쪽 테두리는 10 픽셀입니까?이중 테두리가있는 HTML 테이블?

이 경계선은 셀 사이가 아니라 테이블에서만 필요합니다.

감사합니다.

답변

8

당신의 의미를 끊을 추가 태그를 추가하지 않고, 나는 <table><tbody>를 조합 추천 CSS로 스타일을 것입니다 :

HTML :

<table id="cow"> 
    <tbody> 
     <tr><td>Foo</td><td>Bar</td></tr> 
     <tr><td>Foo</td><td>Bar</td></tr> 
     <tr><td>Foo</td><td>Bar</td></tr> 
    </tbody> 
</table> 

CSS :

#cow { 
    border: 1px solid #000; 
} 

#cow tbody { 
    display: block; 
    border: 10px solid #ccc; 
} 

Working example here.

대체 접근은 테이블을 <div> 요소로 감쌀 것입니다. 그런 다음 1 픽셀 경계를 <div>에 적용하고 10 픽셀 경계를 <table>에 적용합니다. 이것은 분명히 효과적 일 것이지만 덜 의미 론적 인 접근 방식이 될 것입니다. 또 다른 단점은 <div> 너비가 사용 가능한 최대 너비로 기본 설정되어 실제 테이블 너비보다 큰 1 픽셀 테두리가 생깁니다 (example 참조).

0

div 태그의 표를 가져온 다음 div 태그 1px 테두리와 내부 표 10 px 테두리를 지정할 수 있습니다.

0

border-style : double; border-width : thin;