如何在引导程序中将边框半径应用于？
我需要一行应该是圆角的，并且行与行之间有间距。到目前为止，我尝试了如下所示的表格-曲线类。
任何建议/修改都会有帮助。
My CSS -
.table-curved {
border-collapse: separate;
}
.table-curved {
border: solid #ccc 1px;
border-radius: 6px;
border-left:0px;
}
.table-curved tr {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-radius: 26px;
border-collapse:seperate;
border-spacing:5em;
}
.table-curved th {
border-top: none;
}
.table-curved th:first-child {
border-radius: 6px 0 0 0;
}
.table-curved th:last-child {
border-radius: 0 6px 0 0;
}
.table-curved th:only-child{
border-radius: 6px 6px 0 0;
}
.table-curved tr:last-child td:first-child {
border-radius: 0 0 0 6px;
}
.table-curved tr:last-child td:last-child {
border-radius: 0 0 6px 0;
}
我的 HTML -
<table class="table table-curved">
<thead>
<tr>
<th>Schedule Time</th>
<th>First Name</th>
<th>Last Name</th>
<th>Telephone</th>
<th>Status</th>
<th>Contact Score</th>
<th>Last Contacted</th>
<th>Device Type</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
更具体地说，我需要一行看起来与此处的图像类似
你可以试试border-radius on td and th。检查下面的示例以开始使用。
- 调整
border-radius按要求。
- 添加类至
tr想要的background-color
方法一：使用伪元素的解决方案:before
.table-curved {
border-collapse: collapse;
margin-left: 10px;
}
.table-curved th {
padding: 3px 10px;
}
.table-curved td {
position: relative;
background-color: #e5e5e5;
padding: 6px 10px;
border-bottom: 2px solid white;
border-top: 2px solid white;
}
.table-curved td:first-child:before {
content: '';
position: absolute;
border-radius: 8px 0 0 8px;
background-color: coral;
width: 12px;
height: 100%;
left: -12px;
top: 0px;
}
.table-curved td:last-child {
border-radius: 0 5px 5px 0;
}
.table-curved tr:hover td {
background-color: #c5c5c5;
}
.table-curved tr.blue td:first-child:before {
background-color: cornflowerblue;
}
.table-curved tr.green td:first-child:before {
background-color: forestgreen;
}
<table class="table table-curved">
<thead>
<tr>
<th>Schedule Time</th>
<th>First Name</th>
<th>Last Name</th>
<th>Telephone</th>
<th>Status</th>
<th>Contact Score</th>
<th>Last Contacted</th>
<th>Device Type</th>
</tr>
</thead>
<tbody>
<tr class="green">
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
</tr>
<tr>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
</tr>
<tr class="blue">
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
<td>.</td>
</tr>
</tbody>
</table>
方法2：在每行中添加额外/空单元格的解决方案。
.table-curved {
border-collapse: collapse;
}
.table-curved th {
padding: 3px 10px;
}
.table-curved th:first-child {
padding: 6px;
}
.table-curved td {
background-color: #e5e5e5;
padding: 6px 10px;
border-bottom: 2px solid white;
border-top: 2px solid white;
}
.table-curved td:first-child {
padding: 6px;
border-radius: 8px 0 0 8px;
background-color: coral;
}
.table-curved td:last-child {
border-radius: 0 5px 5px 0;
}
.table-curved tr:hover td:not(:first-child) {
background-color: #c5c5c5;
}
.table-curved tr.blue td:first-child {
background-color: cornflowerblue;
}
.table-curved tr.green td:first-child {
background-color: forestgreen;
}
<table class="table table-curved">
<tr>
<th></th>
<th>S.No</th>
<th>Title</th>
<th>Cost</th>
</tr>
<tr class="blue">
<td></td>
<td>1</td>
<td>Title one</td>
<td>$18.0</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>Title two</td>
<td>$23.4</td>
</tr>
<tr class="green">
<td></td>
<td>3</td>
<td>Title three</td>
<td>$40.5</td>
</tr>
</table>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
