วิธีการ - โต๊ะข้างเคียง
เรียนรู้วิธีสร้างตารางแบบเคียงข้างกันด้วย CSS
วิธีการวางโต๊ะเคียงข้างกัน
วิธีสร้างตารางแบบเคียงข้างกันด้วยfloat
คุณสมบัติ CSS:
ตัวอย่าง
* {
box-sizing: border-box;
}
/* Create a two-column
layout */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
วิธีสร้างตารางแบบเคียงข้างกันด้วยflex
คุณสมบัติ CSS:
ตัวอย่าง
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
หมายเหตุ:ไม่รองรับ Flexbox ใน Internet Explorer 10 และเวอร์ชันก่อนหน้า ขึ้นอยู่กับคุณว่าจะใช้ทุ่นหรือเฟล็กซ์ อย่างไรก็ตาม หากคุณต้องการการสนับสนุนสำหรับ IE10 และลง คุณควรใช้ float
เคล็ดลับ:หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับโมดูลเลย์เอาต์กล่องแบบยืดหยุ่นโปรดอ่านบท CSS Flexbox ของเรา
เพิ่มการตอบสนอง
ตัวอย่างด้านบนจะดูไม่ดีบนอุปกรณ์พกพา เนื่องจากสองคอลัมน์จะใช้พื้นที่ของหน้ามากเกินไป ในการสร้างตารางแบบตอบสนอง ซึ่งควรเปลี่ยนจากเค้าโครงแบบสองคอลัมน์เป็นเค้าโครงแบบเต็มความกว้างบนอุปกรณ์เคลื่อนที่ ให้เพิ่มแบบสอบถามสื่อต่อไปนี้:
ตัวอย่าง
/* Responsive layout - makes the two columns stack on top of each other
instead of next to each other on screens that are smaller than 600 px */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
เคล็ดลับ:ไปที่ บทช่วย สอนตาราง CSSเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการจัดรูปแบบตาราง
เคล็ดลับ:ไปที่CSS Float Tutorialเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติ float
เคล็ดลับ:ไปที่CSS Flexbox Tutorialเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติ flex