Бордюр верхний для строки

Question

Допустим, у меня есть список данных в таблице.Можно ли каким-либо образом добиться приведенного ниже формата с помощью CSS?

Я пробовал приведенный ниже CSS, но не тот:

table tr td:nth-child(2){ border-top: solid 1px #ccc; }

Вот мой пример https://codepen.io/w3nta1/pen/QrzVgb

Answer 1

Вы можете использовать только этот CSS для таблицы, как вы хотите

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

Answer 2

Вы можете попробовать расширить границу с помощью абсолютного псевдоэлемента:

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