如何在引导程序中将边框半径应用于 <tr>？

Question

我需要一行应该是圆角和行行之间的间距。所以，到目前为止，我尝试了如下表表曲线类。 任何建议/修改都会有所帮助。

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

Answer 2

您可以在td 和th 上尝试border-radius。查看以下示例以开始使用。

1. 根据需要调整border-radius。
2. 将类添加到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>

Answer 3

您不能将边框半径应用于表格行，而是可以将边框半径添加到 TD，这里是示例

'http://jsfiddle.net/theazureshadow/LRKXD/1/'