Table rowspan 的顶部边框

Question

假设我在 table 中有一个数据列表。有什么方法可以使用 CSS?

实现以下格式

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

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

这是我的例子 https://codepen.io/w3nta1/pen/QrzVgb

Answer 1

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

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

您只能使用此 css 来打造您想要的外观 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;
}

Table rowspan 的顶部边框

Table border top for rowspan

css

css-tables