테이블 테두리 붕괴 : 혼합 설정

Question

collapse 설정을 사용하여 테이블 항목 그룹을 만들고 다른 그룹의 separate을 갖고 싶습니다. 이 "영역"각각에 대해 새로운 테이블을 만들어야합니까? 나는 그것을 시도하고 그들은 일렬로 정렬하지 않는다. 그리고 내 CSS에 을 th 및 td에 적용하면 올바른 방법으로 함께 접히지 않습니다.

아스키 아트 타임.

<!-- table with two rows two columns with first one having colspan=2: --> 
┌────────┐ 
| abcd │ 
├───┬────┤ 
| a | bc | 
└───┴────┘ 

<!-- Same table, separate looks like this (but more squished because there arent enough unicode table characters for this) --> 
┌─────────┐ 
| abcd │ 
└─────────┘ <-- this bit is squished together 
┌───┐┌────┐ 
| a || bc | 
└───┘└────┘ 

그리고 내가 원하는 나는 그들이 붕괴 여부 얻을 여부의 임의의 제어있어 곳 같은 것입니다 :

<!-- this table is made of two rows. two <td colspan=2> in the first row. four <td> in the second row. The third and fourth ones are to be separate. The rest collapse their borders. --> 
┌────────┬─────────────┐ 
| abcd │  efg  | 
├───┬────┼─────────────┘ <--- again, here the hh and ijk borders should be separate but rising to fill that space 
| | |┌──┐┌───────┐ 
| a | bc ||hh|| ijk | 
| | |└──┘└───────┘  
└───┴────┘ 

당신은 내가 HH 및 IJK로 가지고 있음을 알 수 분명히 separate, 나머지는 collapsed입니다.

테이블을 자체 테이블 인 영역에 배치 할 때 문제는 테이블이 더 이상 정렬을 공유하지 않는다는 것입니다. 그것은 더 이상 테이블에 일렬로 나열하지 않습니다 (어떻게 예상 할 수 있습니까?)하지만 데이터가 더 이상 정리되지 않으므로 거래 차단기입니다.

Answer 1

나는 테이블로는 불가능하다고 확신한다. 내가 틀렸다면 누군가가 나를 바로 잡습니다.
margin: 및 cellspacing=을 사용해 보았지만 둘 다 올바르게 작동하지 않습니다.

Answer 2

가장 좋은 방법은 두 번째로 table을 사용하는 것입니다.

그럼 당신은 border-collapse:separate; 및 border-spacing

table{ 
    border-collapse:collapse; 
} 

td{ 
    padding:1em; 
    border:1px solid red; 
    border-collapse:collapse; 
} 

td.no_border{ 
    border-bottom:0; 
    border-right:0; 
    padding:0; 
} 

table.separate{ 
    border-collapse:separate; 
    border-spacing:5px; 
} 

table.separate td{ 
    border-collapse:separate; 
    padding:1em; 
    border-spacing:5px; 
} 

작업 예를 몇 가지 테두리를 제거하고 사용해야합니다 :http://jsfiddle.net/jasongennaro/k2cN5/