JSFiddle - React, Tailwind, and code Playground

by Prajeesh_PR

HTML

<table>
  <thead>
    <tr>
      <td>
        Month
      </td>
      <td>
        Savings
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        January
      </td>
      <td>
        $100
      </td>
    </tr>
    <tr>
      <td>
        February
      </td>
      <td>
        $80
      </td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 100%;
  border-collapse: inherit;
  table-layout: fixed;
  text-align: center;
  font: 13px Verdana;
  border-radius: 30px;
  border-spacing: 0px;
}

table td {
  border: 1px solid #000000;
  padding: 20px;
  background: white;
  color: black;
  border-left: none;
}
table td:first-child{
  border-left: 1px solid #000000;
}
table thead tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}
table tbody tr:last-child td:last-child {
  border-radius: 0 0 20px 0;
}
table tbody tr:last-child td:first-child {
  border-radius: 0 0 0 20px;
}
table thead tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}