Table border top for rowspan - css

Question

Let's say I've a list of data in table.
Is there any way to achieve the below format using CSS?
I tried the below CSS but not the correct one:
table tr td:nth-child(2){ border-top: solid 1px #ccc; }
Here's my example
https://codepen.io/w3nta1/pen/QrzVgb

Answer 1

You could give a try to extend the border via an absolute pseudo element:
table {
border: none;
border-spacing:0;
width:200px;
overflow:hidden;/* hide pseudo overflowing */
}
table tr td + td {
border-top: solid 1px #ccc;
position:relative;/* make it the coordonates reference for the absolute positionned pseudo */
}
table tr td + td:before {
content:'';
position:absolute;
width:100%;
right:100%;
top:-1px;/* climb up the size of parent's border */
border-top: inherit;/* draw same border */
}
<table>
<tbody>
<tr>
<td>01</td>
<td rowspan="3">ABC</td>
</tr>
<tr>
<td>02</td>
</tr>
<tr>
<td>03</td>
</tr>
<tr>
<td>04</td>
<td>DEF</td>
</tr>
<tr>
<td>05</td>
<td>GHI</td>
</tr>
<tr>
<td>06</td>
<td rowspan="2">JKL</td>
</tr>
<tr>
<td>07</td>
</tr>
<tr>
<td>08</td>
<td>MNO</td>
</tr>
<tr>
<td>09</td>
<td>PQR</td>
</tr>
<tr>
<td>10</td>
<td rowspan="2">STU</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>VWX</td>
</tr>
<tr>
<td>13</td>
<td>YZ</td>
</tr>
</tbody>
</table>
https://codepen.io/gc-nomade/pen/wjRYqg

Answer 2

you can use only this css for look like you want table
table tr td + td {
border-top: solid 1px #ccc;
position:relative;
}
table tr td + td:before {
content:'';
position:absolute;
width:100%;
right:100%;
top:-1px;
border-top: solid 1px #ccc;
}