如何让这个带有圆角的 HTML 表格（Boostrap 4）？

Question

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.

Answer 1

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>