[FIXED] How to have this HTML table with rounded corners (Boostrap 4)?

Issue

I've tried making this table's corners rounded, but none of the attempts was successful:

Here's the Fiddle

I've tried this answer's approach, tried using table-bordered, but none worked.

Thanks for your help.

Solution

Simple way to implement a table with rounded corners using Bootstrap 4 is to wrap table inside div with "card" class, like this:

<div class="card">
  <table>
    ...
  </table>
</div>

Answered By - Nemanja

Answer Checked By - Mildred Charles (PHPFixing Admin)