วิธีที่จะสร้าง: ตารางสีแถวตั้ง

เรียนรู้ว่าเช่นไรที่จะใช้ CSS สร้างตารางสีแถวตั้ง

ตารางสีแถวตั้ง

ชื่อจริง ชื่อสกุล Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

เพื่อสร้างตารางสีแถวตั้ง (zebra striping table), ใช้ :nth-child() เลือกเลขถัดไป และใส่สีพื้นหลังสำหรับแถวทั้งหมดที่เป็นตัวเลขเฉพาะ (หรือ ตัวเลขผัน)

ตัวอย่าง

tr:nth-child(even) {
  background-color: #f2f2f2;
}

พึ่งตัวเองทดสอบ

相关页面

教程：CSS 表格

参考手册：CSS nth-child() 选择器