เจอคำถามเรื่องการ Style สลับสีตาราง HTML มาบ่อย ๆ วันนี้เลยเอาบอกในบทความ เทคนิคง่าย ๆ แต่ได้ใช้บ่อย กันซะเลย
CSS บรรทัดเดียว สลับสีตาราง ได้เล๊ย!!!
เอา Code Css นี้ไปใส่ใน File stylesheet หรือเอาไปแปะไว้ที่ Tag <style>...</style> ของหน้าเว็บไซต์กันได้เลย ตัวอย่างนี้คือ ทำให้ Row ของตารางที่เป็นเลขคี่ (1,3,5 ....) ทั้งหมดมี Background เป็นสีเทา ด้วยคำสั่ง nth-child(odd)
tbody tr:nth-child(odd) {background-color: #ccc;}
เพิ่มเติมนิด ถ้าอยากให้กำหนดให้ใส่สีใน Row เลขคู่แทน เราก็สามารถเปลี่ยนคำสั่งจาก odd เป็น even ตามตัวอย่างนี้
tbody tr:nth-child(even) {background-color: #ccc;}
เพิ่มอีกหน่อย ถ้าอยากกำหนดสีให้ทั้ง Row เลขคู่ เลขคี่ ก็แบบนี้เลย
tbody tr:nth-child(even) {background-color: #ffc3a0;} //เลขคู่
tbody tr:nth-child(odd) {background-color: #e5ff7f;} //เลขคี่
tbody tr:nth-child(odd) {background-color: #e5ff7f;} //เลขคี่
