列上的 HTML 表格部分边框

Question

我正在尝试在名为“名称”的列的右侧创建一个边框。我希望它的边框从“名称”行顶部的 50% 一直到底部到“成本”行，但是，在成本行中，我也希望它是 50%高度，这样它就不会到达 table 的最底部。有人可以帮助我如何实现这一目标吗？

icon {
  position: absolute;
  left:-10rem;
  top:-19rem;
}

table {
    border-top: 5px solid black;
    border-bottom: 5px solid black;
    margin-bottom: 10rem;
    width:70%;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
  }
  th {
    text-align:center!important;
    background-color: green;
    padding: 1rem !important
  }
  td {
    text-align:center;
    line-height:.8em !important;
    background-color: gray
  }
  .services {
    font-weight:bold;
    text-align:left;
//  border-right: 1px solid black !important;
  }
  .pricing{
    font-weight:bold;
  }

<img src="http://lorempixel.com/200/200/cats/" style="width:50px;height:50px" class="icon"/>
<table class="table borderless">
  <thead>
    <tr>
      <th>Name</th>
      <th>Plan A</th>
      <th>Plan B</th>
      <th>Plan C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="services">Description 1</td>
      <td class="included"></td>
      <td class="included"></td>
      <td class="included"></td>
    </tr>
    <tr>
      <td class="services">Description 2</td>
      <td>Not Included</td>
      <td class="included"></td>
      <td class="included"></td>
    </tr>
    <tr>
      <td class="services">Description 3</td>
      <td>Not Included</td>
      <td class="included"></td>
      <td class="included"></td>
    </tr>
    <tr>
      <td class="services">Description 4</td>
      <td>Not Included</td>
      <td>Not Included</td>
      <td class="included"></td>
    </tr>
    <tr>
      <td class="services">Description 5</td>
      <td>Not Included</td>
      <td>Not Included</td>
      <td class="included"></td>
    </tr>
    <tr>
      <td class="services">Description 6</td>
      <td>Not Included</td>
      <td>Not Included</td>
      <td class="included"></td>
    </tr>
    <tr>
      <td class="services">Description 7</td>
      <td>Limited</td>
      <td>Hight Quality</td>
      <td>Customized</td>
    </tr>
    <tr>
      <td class="services">Description 8</td>
      <td>Limited</td>
      <td>Hight Quality</td>
      <td>Customized</td>
    </tr>
    <tr>
      <td class="services">Description 9</td>
      <td>Limited</td>
      <td>Hight Quality</td>
      <td>Customized</td>
    </tr>
    <tr class="pricing">
      <td style="padding-bottom: 2rem !important;" class="table-services">Cost</td>
      <td>Price A</td>
      <td>Price B</td>
      <td>Price C</td>
    </tr>
  </tbody>
</table>

Answer 1

用伪元素绘制边框。

table {
  border-collapse: collapse;
  border: 0 solid;
  border-width: 2px 0;
}
th, td {
  position: relative;
}
th:first-child:before,
td:first-child:before {
  content: "";
  position: absolute;
  width: 1px;
  background: black;
  right: 0;
  top: 0;
  bottom: 0;
}
th:first-child:before {
  top: auto;
  height: 50%;
}
tr:last-child td:first-child:before {
  bottom: auto;
  height: 50%;
}

jsFiddle

或者使用背景渐变。

table {
  border-collapse: collapse;
  border: 0 solid;
  border-width: 2px 0;
}
th:first-child,
td:first-child {
  background: linear-gradient(black 50%, black 50%) top right / 1px 100% no-repeat;
}
th:first-child {
  background-position: bottom right;
  background-size: 1px 50%;
}
tr:last-child td:first-child {
  background-size: 1px 50%;
}

jsFiddle