접힌 테두리 모델로 테두리 분리

Question

"분리 된"및 "축소"border-collapse 속성을 어떻게 든 결합하고 싶습니다. 또는 오히려, 내가 붕괴 모델을 사용하지만, 다음과 같이 두 가지 특정 세포/열 사이에 약간의 간격을 추가 할 : b1 것을 전달하기 위해 B 및 C의 하단 라인을 대지 말라는

================= 
A B  C D 
    ----- ----- 
    b1 b2 c1 c2 
----------------- 
1 2 3 4 5 6 
11 12 13 14 15 16 
21 22 23 24 25 26 
================= 

참고하고, b2은 B에 속하며 c1과 c2은 C에 속합니다. 이와

물론 http://jsfiddle.net/f1h87wpn/

table { border-collapse: collapse; border: black solid; border-width: 2px 0; border-spacing: 0.5em; } 
 
tr:nth-of-type(1) td:nth-of-type(2) { border-bottom: black solid 1px; } 
 
tr:nth-of-type(1) td:nth-of-type(3) { border-bottom: black solid 1px; } 
 
tr:nth-of-type(2) { border-bottom: black solid 1px; } 
 
td { text-align: center }

<table> 
 
<tr><td>A</td><td colspan="2">B</td><td colspan="2">C</td><td>D</td></tr> 
 
<tr><td></td><td>b1</td><td>b2</td><td>c1</td><td>cd</td></tr> 
 
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr> 
 
<tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td></tr> 
 
<tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td></tr> 
 
</table>

, 국경 터치 :

은 여기 예를 들어 있습니다. border-collapse을 separate으로 변경하면이 경계선은 잘 보이지만 두 번째 행 아래의 줄은 (예상대로) 사라집니다. 아무도 내가 속한 결과를 얻기 위해 어떤 트릭을 생각할 수 있습니까? HTML을 컴퓨터에서 생성했기 때문에 HTML을 변경할 수 없기 때문에 B 및 C 셀에 여백이있는 div을 추가하는 것은 불가능합니다.

Answer 1

이 Fiddle이 트릭을 수행해야합니다.

tr:nth-of-type(3) { 
    position: relative; 
} 
tr:nth-of-type(3)::after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border-bottom: 1px solid green; 
    width: 100%; 
} 

을 그리고 당신이 border-style: double을 원하는 경우도 적어도 3px의border-width를 설정 : (FF 33에서 테스트)

주로 나는이 같은 수평 행에 대해 의사 요소을 추가 한

border-top: black double 3px;