html - 如何在 bootstrap 中将边界半径应用于 <tr>？

Question

我需要一行应该是圆 Angular 的，并且行与行之间有间距。所以，到目前为止，我尝试了如下所示的表格表格 flex 类。 任何建议/修改都会有所帮助。

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

更具体地说，我需要一行看起来类似于这里的图片

Answer 1

你可以在第一列中使用 :before:

我在这里创建了一个 example给你:

.table-curved {
    border-collapse: separate;
    width:100%;
    border-spacing:0px;
}
.table-curved {
    border: solid #ccc 1px;
    border-radius: 6px;
    border-left:0px;
}


.table-curved tr {
    position: relative;
    border-radius: 26px;
    border-collapse:seperate;
    border-spacing:0;
    background:#f8f8f8;
    backgrnoud-position-x: 10px;
    padding:10px 0;
    transition:background .1s;
}
.table-curved tr:hover {
    background:#eee;
}
.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;
}

.table-curved td:first-child:before {
    content: "";
    display: block;
    width: 10px;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 6px 0 0 6px;
    position: absolute;
}
.table-curved td.red:before {
    background:red;
}
.table-curved td.green:before {
    background:green;
}
.table-curved td.blue:before {
    background:blue;
}
.table-curved td.orange:before {
    background:orange;
}
.table-curved td:first-child{
    padding-left: 15px;
}
.table-curved td{
    position: relative;
    border-bottom: 10px solid white;
    border-spacing: 0px;
    padding: 10px;
}