ตารางตอบสนอง CSS
ตารางตอบสนอง
ตารางตอบสนองจะแสดงแถบเลื่อนแนวนอนหากหน้าจอเล็กเกินไปที่จะแสดงเนื้อหาทั้งหมด:
ชื่อจริง | นามสกุล | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน | คะแนน |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
จิล | สมิธ | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
อีฟ | แจ็คสัน | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
อดัม | จอห์นสัน | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
เพิ่มองค์ประกอบคอนเทนเนอร์ (เช่น <div>) โดยมีoverflow-x:auto
องค์ประกอบรอบ <table> เพื่อให้ตอบสนอง:
ตัวอย่าง
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
หมายเหตุ:ใน OS X Lion (บน Mac) แถบเลื่อนจะถูกซ่อนไว้โดยค่าเริ่มต้นและแสดงเฉพาะเมื่อใช้งานเท่านั้น (แม้ว่าจะตั้งค่า "overflow:scroll" ไว้)
ตัวอย่างเพิ่มเติม
ตัวอย่างนี้สาธิตวิธีการสร้างตารางแฟนซี
ตัวอย่างนี้สาธิตวิธีการจัดตำแหน่งคำอธิบายตาราง
คุณสมบัติตาราง CSS
Property | Description |
---|---|
border | Sets all the border properties in one declaration |
border-collapse | Specifies whether or not table borders should be collapsed |
border-spacing | Specifies the distance between the borders of adjacent cells |
caption-side | Specifies the placement of a table caption |
empty-cells | Specifies whether or not to display borders and background on empty cells in a table |
table-layout | Sets the layout algorithm to be used for a table |