行边的表边界顶部

Question

我们说我在表格中列出了数据。 有没有办法使用CSS实现以下格式？

我尝试了下面的CSS但不是正确的：

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

这是我的榜样 https://codepen.io/w3nta1/pen/QrzVgb

Answer 1

您可以尝试通过绝对伪元素扩展边框：

＆＃13;

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

https://codepen.io/gc-nomade/pen/wjRYqg

Answer 2

你只能使用这个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;
}