我需要创建具有三列的表，其中一列具有背景色，并且它们之间的边框是分开的。我正在为此项目使用Bootstrap。对于表，我使用colgroup创建列，并使用透明边框分隔列。这个解决方案行得通，不是很好就不可怕。我的问题是我需要向具有蓝色背景的列添加阴影和边框半径。我没有找到任何可行的解决方案。这是我需要创建的表的图像-[表格设计] [1]
编辑：这是代码https://jsfiddle.net/Razarach/hd8tkfqx/
<table>
<colgroup>
<col class="col-xs-2 col-sm-2 col-md-4 col-lg-4 col-xl-4" />
<col class="col-xs-2 col-sm-2 col-md-3 col-lg-3 col-xl-3" />
<col class="col-xs-2 col-sm-2 col-md-3 col-lg-3 col-xl-3 blue" />
</colgroup>
<thead>
<tr>
<th class="white-bg-bt"> </th>
<th class="table-title white-bg-bt">text</th>
<th class="table-logo blue-bg-bt">text</th>
</tr>
</thead>
<tbody>
<tr>
<td class="white-bg">text</td>
<td class="white-bg text-center"><img src="assets/x-mark.svg"></td>
<td class="blue-bg text-center"><img src="assets/check-mark.svg"></td>
</tr>
<tr>
<td class="white-bg">text</td>
<td class="white-bg text-center"><img src="assets/x-mark.svg"></td>
<td class="blue-bg text-center"><img src="assets/check-mark.svg"></td>
</tr>
<tr>
<td class="white-bg">text</td>
<td class="white-bg text-center"><img src="assets/x-mark.svg"></td>
<td class="blue-bg text-center"><img src="assets/check-mark.svg"></td>
</tr>
<tr>
<td class="white-bg">text</td>
<td class="white-bg text-center"><img src="assets/x-mark.svg"></td>
<td class="blue-bg text-center"><img src="assets/check-mark.svg"></td>
</tr>
</tbody>
</table>
为表的该列提供特定的ID或类，以便可以认为它与表中的其余列不同，然后使用CSS赋予该唯一的列背景颜色。例如：-
#uniqueColumn {
background-color:blue; border-radius: 5px; box-shadow : 0 1px 2px 0 rgba(60,64,67,0.30), 0 1px 3px 1px rgba(60,64,67,0.15);
}
您可以根据选择更改css。
您应该添加此
css
.blue, .blue-bg-bt, .blue-bg {
border-radius: 14px;
background-color: #147BD1;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
}
您可以在Bootstrap4类的帮助下，通过css ：last-child属性进行求解。在下面的这段代码中，您可以看到具有Shadow效果的最后一列的圆角。
.table col:last-child{
background: #72B0E3;
}
.table thead th:last-child{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: 0 -10px 10px rgba(0,0,0,0.1), -5px 0px 5px rgba(0,0,0,0.1), 5px 0px 5px rgba(0,0,0,0.1);
}
.table tbody td:last-child{
box-shadow: -5px 0px 8px rgba(0,0,0,0.15), 5px 0px 8px rgba(0,0,0,0.15);
position: relative;
}
.table tbody td:last-child:before{
content: '';
position: absolute;
width: 100%;
height: 60%;
left: 0;
top: -30%;
z-index: 0;
background: #72B0E3;
}
.table tbody td:last-child i.fa{z-index: 2; position: relative;}
.table tbody td{
border-color: #72B0E3;
}
.table tbody tr:last-child td:last-child{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 10px 10px rgba(0,0,0,0.1), -5px 0px 5px rgba(0,0,0,0.1), 5px 0px 5px rgba(0,0,0,0.1);
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<div class="container my-4">
<div class="row">
<div class="col-sm-12">
<table class="table">
<colgroup>
<col class="col-8"/>
<col/>
<col/>
</colgroup>
<thead>
<tr>
<th class="border-0">Item</th>
<th class="border-0">Action</th>
<th class="border-0 text-white">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item #1</td>
<td class="text-center text-danger"><i class="fa fa-times-circle"></i></td>
<td class="text-center text-white"><i class="fa fa-check-circle"></i></td>
</tr>
<tr>
<td>Item #2</td>
<td class="text-center text-danger"><i class="fa fa-times-circle"></i></td>
<td class="text-center text-white"><i class="fa fa-check-circle"></i></td>
</tr>
<tr>
<td>Item #3</td>
<td class="text-center text-danger"><i class="fa fa-times-circle"></i></td>
<td class="text-center text-white"><i class="fa fa-check-circle"></i></td>
</tr>
<tr>
<td>Item #4</td>
<td class="text-center text-danger"><i class="fa fa-times-circle"></i></td>
<td class="text-center text-white"><i class="fa fa-check-circle"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>