Border Radius Tak Jadi Kat Jadual? Ini Penyelesaiannya!

05 Sep 2024

Pernah tak korang cuba nak bagi jadual dalam website korang tu nampak lebih moden dan menarik dengan efek bulat kat bucu-bucunya? Mestilah pernah kan, sebab siapa je tak nak website yang cantik dan up-to-date? Tapi, frustnya bila dah guna CSS border-radius, jadual tu tetap degil tak nak jadi bulat pun. Jangan risau, korang tak keseorangan! Ramai lagi yang alami masalah sama, dan dalam artikel ni, kita akan bongkar rahsia kenapa border-radius ni kadang-kadang tak jalan kat jadual HTML dan macam mana nak selesaikannya.

Sebelum tu, jom kita faham dulu apa itu border-radius. Dalam CSS (Cascading Style Sheets), border-radius ni satu property yang kita guna untuk bagi efek bulat kat elemen HTML, termasuklah jadual. Dengan border-radius, kita boleh tentukan tahap 'kebulatan' elemen tu, dari yang sikit je sampailah jadi bulat sepenuhnya macam bulatan.

Sekarang, kenapa border-radius ni tak jalan kat jadual? Ada beberapa sebab utama:

DOCTYPE HTML tak diisytiharkan: Haa, ni salah satu sebab yang paling biasa! Korang kena pastikan kod HTML korang tu ada DOCTYPE HTML yang sah kat bahagian paling atas, contohnya <!DOCTYPE html>. Ni penting sebab DOCTYPE ni bagitau browser macam mana nak render kod HTML korang dengan betul.
Konflik CSS: Kadang-kadang, ada CSS lain yang 'bertembung' dengan kod border-radius korang. Cuba semak balik kod CSS korang, pastikan takde property lain yang override border-radius, contohnya border-collapse atau overflow.
Salah Tag HTML: Pastikan korang guna tag HTML yang betul untuk jadual, iaitu <table>, <tr>, dan <td>. Kalau salah guna tag, mungkin border-radius takkan berfungsi dengan betul.

Jadi, macam mana nak selesaikan masalah ni? Senang je! Cuba ikut langkah-langkah ni:

Pastikan DOCTYPE HTML: Periksa kod HTML korang dan pastikan ada <!DOCTYPE html> kat baris pertama.
Guna CSS yang spesifik: Daripada guna border-radius kat tag <table>, cuba guna kat tag <td> untuk setiap sel dalam jadual. Ataupun, guna class atau ID yang spesifik untuk target jadual yang korang nak bagi efek border-radius.
Tetapkan border-collapse: Pastikan border-collapse kat tag <table> disetkan kepada separate. Contohnya: <table style="border-collapse: separate;">.

Kalau ikut semua langkah ni, InsyaAllah masalah border-radius tak jalan kat jadual tu dapat diselesaikan. Ingat, nak hasilkan website yang cantik dan menarik ni kena banyakkan praktis dan cuba-cuba. Selamat mencuba!