CODEWITHSUNDEEP
htmlcss
Jellby
Jellby

Reputation: 2686

Separate border with collapsed border model

I would like to somehow combine the "separate" and "collapse" border-collapse properties. Or rather, I want to use the collapse model, but add some separation between two specific cells/columns, like this:

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

Note that the bottom lines of B and C should not touch, to convey that b1 and b2 belong to B, and c1 and c2 belong to C.

I have an example here: 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>

and of course, with this the borders touch. If I change border-collapse to separate, this border looks fine, but the line below the second row disappears (as expected). Can anyone think of any trick to get the result I'm after? I cannot change the HTML, since it's machine-generated, so adding a div with margin in the B and C cells is not a possibility.

Upvotes: 0

Views: 282

Answers (1)

pbaldauf
pbaldauf

Reputation: 1681

This Fiddle should do the trick. (Tested on FF 33)

Mainly I have added a pseudo-Element for a horizontal row like this:

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%;
}

And also set border-width at least 3px if you want a border-style: double:

border-top: black double 3px;

Upvotes: 1

Related Questions