Table border top for rowspan

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