單獨邊框與摺疊邊框模型

我想以某種方式結合「單獨」和「摺疊」border-collapse屬性。或者說，我想用崩潰的模式，但增加了兩個特定的細胞/列之間的一些分離，像這樣：單獨邊框與摺疊邊框模型

================= 
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 
=================

注意的B和C底線不能碰，傳達b1和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，因爲它是由機器生成的，因此在B和C單元中添加帶有邊距的div不是可能的。

來源

2014-11-02 Jellby

如果代碼是機器生成的，您是否可以使用JavaScript處理代碼？ – pbaldauf 2014-11-02 15:34:20

@pbaldauf是的，我可以那樣做，但我不想。 – Jellby 2014-11-02 15:36:42

好吧，這是一個棘手的問題。我認爲如果您使用* CSS僞元素*並將白色背景的div放在需要填補空白的位置，則可以達到預期的效果。 – pbaldauf 2014-11-02 15:40:44

這Fiddle應該做的伎倆。（測試FF 33）

主要是我添加了一個僞元素的水平行是這樣的：

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-width至少的3px如果你想有一個border-style: double：

border-top: black double 3px;

來源

2014-11-02 15:51:45 pbaldauf

@Jellby這段代碼適合你嗎？ – pbaldauf 2014-11-02 15:55:25

不錯。唯一挑剔的是該行不會一直延伸到表邊（嘗試使用'border-spacing：1em'），但我想我可以忍受這一點。它也可能以意想不到的方式打破，所以也許我會採取其他一些格式。 – Jellby 2014-11-02 16:15:21

如果你在表格上有'border-spacing：1em'，你可以改變''after''僞元素中的'width'和position-left屬性，比如http://jsfiddle.net/f1h87wpn/4/ – pbaldauf 2014-11-02 16:20:57

單獨邊框與摺疊邊框模型

回答

相關問題