Please support Richard M. Stallman, free software movement activist, founder of GNU project and Free Software Foundation, during ongoing attempt to defame and displace him. Terima kasih (^_^) (bandithijo, 2021/04/05) ●

بسم الله الرحمن الرحيم

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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;
}

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.

gambar_2

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


Penulis

bandithijo

BanditHijo adalah nama pena saya – meminjam istilah keren dari para penulis. Teman-teman menyebut saya sebagai GNU/Linux Enthusiast. Saya memang gemar mengutak-atik sistem operasi ini. Bukan karena hobi tapi karena saya perlu untuk menggunakannya. Hehe.

- Rizqi Nur Assyaufi

Berlangganan via Email

Jangan sampai ketinggalan kabar dan info terbaru mengenai BanditHijo (R)-Chive.
Ayo bergabung!
916d3198f9c00dd863117e7372f563c58b46dade