列上的HTML表部分边框

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

图标{
位置：绝对位置；
左：-10雷姆；
顶部：-19雷姆；
}
桌子{
边框顶部：5px纯黑；
边框底部：5px纯黑；
边缘底部：10雷姆；
宽度：70%；
边界崩溃：崩溃！重要；
边框间距：0！重要；
}
th{
文本对齐：居中！重要；
背景颜色：绿色；
填充：1rem！重要
}
运输署{
文本对齐：居中；
线条高度：.8em！重要；
背景颜色：灰色
}
.服务{
字体大小：粗体；
文本对齐：左对齐；
//右边框：1px纯黑！重要；
}
.定价{
字体大小：粗体；
}

名称
计划A
方案B
方案C
说明1
说明2
不包括
说明3
不包括
说明4
不包括
不包括
说明5
不包括
不包括
说明6
不包括
不包括
说明7
有限的
高品质
定制的
说明8
有限的
高品质
定制的
说明9
有限的
高品质
定制的
成本
价格A
价格B
价格C

尝试使用

：first-child（）

伪元素：

table.borderless { 
    tbody {
        tr {
            td {
                &:first-child {
                    border-right: 2px solid black;
                }
            }
        }
    }
}

---

使用伪元素绘制边界

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

或者使用背景渐变

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

---

使用伪元素

td:n子项（1）{
宽度：275px；
}
桌子{
位置：相对位置；
边框顶部：2件纯黑；
底部边框：2件纯黑；
}
表：之后{
内容：“；
身高：215px；
宽度：1px；
背景：黑色；
位置：绝对位置；
顶部：15px；
左：100px；
}

名称
计划A
方案B
方案C
说明1
说明2
不包括
说明3
不包括
说明4
不包括
不包括
说明5
不包括
不包括
说明6
不包括
不包括
说明7
有限的
高品质
定制的
说明8
有限的
高品质
定制的
说明9
有限的
高品质
定制的
成本
价格A
价格B
价格C

这里有一个参考

---

你能发布一个你希望它最终看起来像什么的截图吗？你的.css文件中的代码是什么？它包含在html文件中吗？刚刚用css编辑了我想要避开的内容的屏幕截图你刚刚复制了我的内容哈哈哈是的，这是他想要的，但是表格单元格有需要去掉的填充。这似乎可行，尽管我在表格左上角有一个小图标，当我添加这个时，第一个标题行内的图标部分不会显示，因为它似乎位于后面。图标正在使用。图标{position:absolute；left:-8rem；top:-14rem；}@J.Rem这可能是由于将相对位置添加到表格单元格中，您是否能够将该图标移出表格或不使用absolute position？我还添加了另一个具有背景渐变和无位置属性的解决方案。我刚刚意识到，在Firefox中，在第一行/第一个标题的底部，边框看起来有点截断。为什么呢？我该怎么修复呢？@J.Rem这里看起来不错，我想可能是你的其他风格造成的。

<table cellspacing="0">
<tbody>
    <tr>
        <td class="col-header"> <span class="">Name</span>
        </td>
        <td class="col-header"> <span class="">Plan A</span>
        </td>
        <td class="col-header"> <span class="">Plan B</span>
        </td>
    </tr>
    <tr>
        <td class="col-header highlight">
        </td>
        <td >
        </td>
        <td class="">
        </td>
    </tr>
    <tr>
        <td class="text">description 1
        </td>
        <td class="text-center">v 1-1
        </td>
        <td class="text-center">v 1-2
        </td>
    </tr>
     <tr>
        <td class="text">description 2
        </td>
        <td class="text-center">v 2-1
        </td>
        <td class="text-center">v 2-2
        </td>
    </tr>
    <tr>
        <td class="col-header text"><span class="mobile-photo">Cost</span>
        </td>
        <td class="col-header"> <span class="mobile-photo">Price A</span>
        </td>
        <td class="col-header"> <span class="mobile-photo">Price B</span>
        </td>
    </tr>
</tbody>

.col-header{
 width: 100px;
 height: 20px;
 text-align: center;
 color: black;
 vertical-align:middle;
 position: relative;
}
.col-header > span {
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 top: 15px;
 z-index:2;
 vertical-align: middle;
 line-height: 20px;
}   

.col-header.highlight{ 
 border-right-color: #ff0000;
 border-right-style: solid;
}

.text-center{
 text-align:center
}
.text{
 width:100px;
 border-right-color: #ff0000;
 border-right-style: solid;
}