วิธีการ - ตารางตอบสนอง
เรียนรู้วิธีสร้างตารางตอบสนอง
ตารางตอบสนอง
ตารางตอบสนองจะแสดงแถบเลื่อนแนวนอนหากหน้าจอเล็กเกินไปที่จะแสดงเนื้อหาทั้งหมด ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูเอฟเฟกต์:
ชื่อจริง | นามสกุล | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
จิล | สมิธ | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
อีฟ | แจ็คสัน | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
อดัม | จอห์นสัน | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
ในการสร้างตารางตอบสนอง ให้เพิ่มองค์ประกอบคอนเทนเนอร์ด้วยoverflow-x:auto
<table>:
ตัวอย่าง
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
หมายเหตุ:ใน OS X Lion (บน Mac) แถบเลื่อนจะถูกซ่อนไว้โดยค่าเริ่มต้นและแสดงเฉพาะเมื่อใช้งานเท่านั้น (แม้ว่าจะตั้งค่า "overflow:scroll" หรือ auto ไว้)
เคล็ดลับ:ไปที่ บทช่วย สอนตาราง CSSเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการจัดรูปแบบตาราง