Membuat Table dengan Rounded Corner pada Bootstrap 4

Created at: 2020-11-29

Author by: BanditHijo

Latar Belakang

Kalau teman-teman menggunakan Bootstrap sebagai CSS Framework–terkhusus Bootstrap 4–pasti akan mendapatkan table dengan bagian corner yang bersiku.

Gambar 1

<table class="table table-bordered table-hover my-3">
  <thead>
    <tr>
      <th scope="col">Ticker</th>
      <th scope="col">Name</th>
      <th scope="col">Price</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Masalah

Saya ingin memodifikasi agar tampilan dari masing-masing corner dari tabel memiliki tampilan yang rounded.

Namun, Bootstrap 4 tidak menyediakan class agar user dapat membuat table dengan corner yang rounded.

Pemecahan Masalah

Kita akan mengoverride class table bawaan Bootstrap.

SYARAT

Tabel harus memiliki struktur seperti di bawah ini.

<table>

  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>

</table>

Oke, langsung ke penerapan.

Pada table, gunakan class table-borderless agar border bawaan bootstrap tidak mengoverride tabel border yang akan kita custom.

<table class="table table-borderless">
  <thead>
    <tr>
      <th>Ticker</th>
      <th>Name</th>
      <th>Price</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Selanjutnya, tambahkan custom CSS untuk mengoverride class table dari Bootstrap.

table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
table tr th,
table tr td {
  border-right: 1px solid #dee2e6 !important;
  border-bottom: 1px solid #dee2e6 !important;
}
table tr th:first-child,
table tr td:first-child {
  border-left: 1px solid #dee2e6 !important;
}
table tr th {
  border-top: 1px solid #dee2e6 !important;
}

/* top-left border-radius */
table tr:first-child th:first-child {
  border-top-left-radius: 0.25rem !important;
}

/* top-right border-radius */
table tr:first-child th:last-child {
  border-top-right-radius: 0.25rem !important;
}

/* bottom-left border-radius */
table tr:last-child td:first-child {
  border-bottom-left-radius: 0.25rem !important;
}

/* bottom-right border-radius */
table tr:last-child td:last-child {
  border-bottom-right-radius: 0.25rem !important;
}