我试图在“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>
最佳答案
用伪元素绘制边框。
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/