CODEWITHSUNDEEP
htmlcsshtml-tableborder-radiusborder-spacing
Max Herczeg
Max Herczeg

Reputation: 15

Border Radius On Table With Border Collapse set to Seprate

On my project, I have a border radius set to 10px on each of my table rows.

I made my table rows separated which forced me to use "border-collapse: separate;

This causes my border radius to not show up. Is there anyway to fix this issue so I can have space in between my table rows while having a border radius on each of them?

Thanks in advance.

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-family: 'Poppins', sans-serif;
  font-family: 'Roboto', sans-serif;
  color: #2E384D;
  background-color: #F5F7FC;
}

table {
  width: 70vw;
  border-collapse: separate;
  border-spacing: 0 15px;
}

tr:nth-child(even) {
  background-color: white;
}

tr:nth-child(odd) {
  background-color: #f1f2f6;
}

tr {
  border: 1px solid black;
  border-radius: 15px;
}

th {
  background-color: #FFFFFF;
  background-color: #2B59FF;
  color: white;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: bold;
}

td {
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 15px;
  font-weight: 100;
}
<table>
  <tr>
    <th>Company</th>
    <th>Email</th>
    <th>Progress</th>
    <th>Location</th>
    <th>Payment</th>
  </tr>

  <tr>
    <td>Time Developments</td>
    <td>[email protected]</td>
    <td>In Progress</td>
    <td>You48</td>
    <td>$200</td>
  </tr>

  <tr>
    <td>Quad Panelling</td>
    <td>[email protected]</td>
    <td>Completed</td>
    <td>638 St. Clair East</td>
    <td>$300</td>
  </tr>

  <tr>
    <td>Time Developments</td>
    <td>[email protected]</td>
    <td>In Progress</td>
    <td>You48</td>
    <td>$100</td>
  </tr>

  <tr>
    <td>Quad Panelling</td>
    <td>[email protected]</td>
    <td>Completed</td>
    <td>638 St. Clair East</td>
    <td>$300</td>
  </tr>
</table>

Upvotes: -1

Views: 62

Answers (1)

Pete
Pete

Reputation: 58422

You can put it on the first and last child of each row instead:

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-family: 'Poppins', sans-serif;
  font-family: 'Roboto', sans-serif;
  color: #2E384D;
  background-color: #F5F7FC;
}

table {
  width: 70vw;
  border-collapse: separate;
  border-spacing: 0 15px;
}

tr:nth-child(even) {
  background-color: white;
}

tr:nth-child(odd) {
  background-color: #f1f2f6;
}

tr {
  border: 1px solid black;
}

th {
  background-color: #FFFFFF;
  background-color: #2B59FF;
  color: white;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: bold;
}

td {
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 15px;
  font-weight: 100;
}

tr :first-child {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
tr :last-child {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
<table>
  <tr>
    <th>Company</th>
    <th>Email</th>
    <th>Progress</th>
    <th>Location</th>
    <th>Payment</th>
  </tr>

  <tr>
    <td>Time Developments</td>
    <td>[email protected]</td>
    <td>In Progress</td>
    <td>You48</td>
    <td>$200</td>
  </tr>

  <tr>
    <td>Quad Panelling</td>
    <td>[email protected]</td>
    <td>Completed</td>
    <td>638 St. Clair East</td>
    <td>$300</td>
  </tr>

  <tr>
    <td>Time Developments</td>
    <td>[email protected]</td>
    <td>In Progress</td>
    <td>You48</td>
    <td>$100</td>
  </tr>

  <tr>
    <td>Quad Panelling</td>
    <td>[email protected]</td>
    <td>Completed</td>
    <td>638 St. Clair East</td>
    <td>$300</td>
  </tr>
</table>

Upvotes: 0

Related Questions