我试图在“Name”列的右边创建一个边框。我希望它的边框从行“Name”的顶部的50%一直到底部的“Cost”行,但是,在Cost行中,我也希望它的高度是50%,这样它就不会到达表的最底部。有人能帮我怎么做到这一点吗?

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>

html - 列上的HTML表部分边框-LMLPHP

最佳答案

用伪元素绘制边框。

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

关于html - 列上的HTML表部分边框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44139964/

10-11 23:28
查看更多