如何将边框半径应用于< tr>在自举？ [英] How to apply border radius to <tr> in bootstrap?

问题描述

我需要一排应该是圆角和row-row之间的间距。所以，我尝试了如下表格弯曲类。
任何建议/修改都会有帮助。

我的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> 
 Schedule Time< / th> 
< th>名字< / th> 
< th>姓氏< / th> 
< th>电话< / th> 
< th>状态< / th> 
联系人分数< / th> 
< th>上次联系< / th> 
< th>设备类型< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< / tr> 
< / tbody> 
< / table> 
  

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

td 上尝试 border-radius 和个。检查下面的例子开始。

1. 根据需要调整 border-radius 。


2. 将类添加到 tr 中以获得所需的 background-color

方法1：使用伪元素的解决方案：之前

.table-curved {border-collapse：坍方; margin-left：10px;}。table-curved {padding：3px 10px;}。table-curved td {position：relative; background-color：＃e5e5e5; padding：6px 10px; border-bottom：2px纯白色; border-top：2px solid white;}。table-curved td：first-child：before {content：'';位置：绝对; border-radius：8px 0 0 8px;背景颜色：珊瑚;宽度：12px;身高：100％; left：-12px; 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>

b
方法2：每行添加额外/空单元格的解决方案。

$ b

.table-curved {border-collapse：collapse;}。table-curved {padding：3px 10px;}。table-curved th：first-child {padding：6px;}。table-curved td {background-color ：＃e5e5e5; padding：6px 10px; border-bottom：2px纯白色; border-top：2px solid white;}。table-curved td：first-child {padding：6px; border-radius：8px 0 0 8px; 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> <的第i;< /第> <的第i; S.No< /第> <的第i;标题< /第> <的第i;成本及LT; /第> < / 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>标题三< / td> < TD> $ 40.5 LT; / TD> < / table>

I need a row should be of rounded corners and a spacing between row-row.So,far I tried table table-curved class as below. Any suggestions/modifications would be helpful.

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

My 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>

To be more specific I need a row looks similar to image here

解决方案

You can try border-radius on td and th. Check below example to get started.

1. Adjust the border-radius as required.
2. Add class to tr to have desired background-color

Approach 1: A solution using pseudo element :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>

Approach 2: A solution with adding extra/empty cell in each row.

.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>

这篇关于如何将边框半径应用于< tr>在自举？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！