Question

我想以某种方式结合“单独”和“崩溃”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，{{1 }}和c1属于c2。

我在这里有一个例子：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，此边框看起来很好，但第二行下方的行会消失（如预期的那样）。任何人都可以想到任何技巧来获得我追求的结果吗？我无法更改HTML，因为它是由机器生成的，因此在separate和div单元格中添加B边距是不可能的。

Answer 1

这个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，还要设置border-style: double至少 3px ：

border-top: black double 3px;

与折叠边框模型分开的边框

1 个答案: