Prasad.Chitti Prasad.Chitti - 5 months ago 19
CSS Question

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

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

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>

Comments