How to create rounded corners on a table and keep table border for the whole table and columns?

Question

I need to create a table with rounded corners and within the table only columns borders. There should be no border between the rows.

I tried to create the rounded corners but the collapse property should be collapse or the columns borders inside the table will be 2. If I keep the collapse property as separate as the other answers have suggested, the column borders will not collapse. I am not sure how to make this work.

table {
  position: relative;
  top: 80px;
  left: 15px;
  border: 1px solid #000000 !important;
  border-collapse: collapse;
}

th,
td {
  padding-left: 15px;
  padding-right: 15px;
  border-left: 1px solid #d4d4d4;
  border-right: 1px solid #d4d4d4;
}

<table class="status-table">
  <tr>
    <td>RA-STATUS</td>
    <td>Due Date</td>
    <td>Assigned To</td>
    <td>Last Updated</td>
  </tr>
  <tr>
    <td>Open-Draft</td>
    <td>04/20/2012</td>
    <td>John Doe(for you)</td>
    <td>03/28/2012 | By: John Doe</td>
  </tr>
</table>

Does this answer your question? [CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?](https://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i) — tacoshy, Nov 17 '20 at 17:26
Hello and welcome to SO. Please use the search function first. Your question has already be asked multiple times adn have plenty of solutions on SO already: https://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i --- As such your question will be flagged as a duplicate and closure. — tacoshy, Nov 17 '20 at 17:28

54ka · Accepted Answer · 2020-11-17T20:25:40.830

Rounded corners on a table and borders for columns

table {
    position: relative;
    top: 80px;
    left: 15px;
    border: 1px solid #000000;
    border-collapse: collapse;
    border-radius: 10px;
    display: inline-block;
}

th,
td {
    padding-left: 15px;
    padding-right: 15px;
}

td {
    border-left: 1px solid #000000;
}

td:first-child {
    border-left: 0px;
}

<table class="status-table">
    <tr>
        <td>RA-STATUS</td>
        <td>Due Date</td>
        <td>Assigned To</td>
        <td>Last Updated</td>
    </tr>
    <tr>
        <td>Open-Draft</td>
        <td>04/20/2012</td>
        <td>John Doe(for you)</td>
        <td>03/28/2012 | By: John Doe</td>
    </tr>
</table>

How to create rounded corners on a table and keep table border for the whole table and columns?

1 Answers1