Question

我试图在名为＆＃34; Name＆＃34;的列右侧创建一个边框。边界，我希望它从行的顶部的50％＆＃34;名称＆＃34;并且它一路走到了“成本”的最低点。但是，在成本行中，我还希望它的高度为50％，因此它不会到达表格的最底部。有人可以帮助我如何实现这个目标？

＆＃13;

let

＆＃13;

> import Data.Record (unionMerge)
> name = {name: "Jim"}
> age = {age: 37}
> :t (unionMerge age name)
{ name :: String
, age :: Int
}

＆＃13;

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

Answer 2

使用伪元素......

＆＃13;

td:nth-child(1) {
  width: 275px;
}

table {
  position: relative;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

table:after {
  content: "";
  height: 215px;
  width: 1px;
  background: black;
  position: absolute;
  top: 15px;
  left: 100px;
}

＆＃13;

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

＆＃13;

Answer 3

这是一个参考

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

CSS

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

Answer 4

尝试使用:first-child()伪元素：

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

列表上的HTML表格部分边框

4 个答案: