How to apply border radius to <tr> in bootstrap? - html

Question

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

Answer 1

you can use :before in first column:
Here i created a example for you:
.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

You can try border-radius on td and th. Check below example to get started.
Adjust the border-radius as required.
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>

Answer 3

You cannot apply border radius to table row, instead you can add border-radius to TD, here is example
'http://jsfiddle.net/theazureshadow/LRKXD/1/'