Latar Belakang

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

1<table class="table table-bordered table-hover my-3">
2  <thead>
3    <tr>
4      <th scope="col">Ticker</th>
5      <th scope="col">Name</th>
6      <th scope="col">Price</th>
7      <th scope="col">Action</th>
8    </tr>
9  </thead>
10  <tbody>
11    <tr>
12      <td scope="row">...</td>
13      <td>...</td>
14      <td>...</td>
15      <td>...</td>
16    </tr>
17  </tbody>
18</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.

1<table class="table table-borderless">
2  <thead>
3    <tr>
4      <th>Ticker</th>
5      <th>Name</th>
6      <th>Price</th>
7      <th>Action</th>
8    </tr>
9  </thead>
10  <tbody>
11    <tr>
12      <td>...</td>
13      <td>...</td>
14      <td>...</td>
15      <td>...</td>
16    </tr>
17  </tbody>
18</table>

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

1table {
2  border-collapse: separate !important;
3  border-spacing: 0 !important;
4}
5table tr th,
6table tr td {
7  border-right: 1px solid #dee2e6 !important;
8  border-bottom: 1px solid #dee2e6 !important;
9}
10table tr th:first-child,
11table tr td:first-child {
12  border-left: 1px solid #dee2e6 !important;
13}
14table tr th {
15  border-top: 1px solid #dee2e6 !important;
16}
17
18/* top-left border-radius */
19table tr:first-child th:first-child {
20  border-top-left-radius: 0.25rem !important;
21}
22
23/* top-right border-radius */
24table tr:first-child th:last-child {
25  border-top-right-radius: 0.25rem !important;
26}
27
28/* bottom-left border-radius */
29table tr:last-child td:first-child {
30  border-bottom-left-radius: 0.25rem !important;
31}
32
33/* bottom-right border-radius */
34table tr:last-child td:last-child {
35  border-bottom-right-radius: 0.25rem !important;
36}

Besar dari radius 0.25rem saya samakan dengan besar radius dari input box.

Warna border #dee2e6 juga saya samakan dengan warna border dari input box.

Tujuannya agar terlihat menyatu dan seragam –tidak terlihat seperti custom abal-abal.

Dan beginilah hasilnya setelah modifikasi di atas kita lakukan.

Pesan Penulis

Sepertinya, segini dulu yang dapat saya tuliskan.

Sebenarnya, implementasi ini tidak spesifik untuk Bootstrap 4 saja, namun sangat general dan dapat digunakan dimana saja.

Bahkan saya pun menggunakannya di blog ini yang notabennya menggunakan CSS buatan sendiri.

Mudah-mudahan dapat bermanfaat.

Terima kasih.

(^_^)

Referensi

1. codepen.io/mlms13/pen/CGgLF
   Diakses tanggal: 2020/11/29