คุณสมบัติเค้าโครงตาราง CSS
ตัวอย่าง
ตั้งค่าอัลกอริธึมเค้าโครงตารางที่แตกต่างกัน:
table.a {
table-layout: auto;
width: 180px;
}
table.b {
table-layout:
fixed;
width: 180px;
}
ความหมายและการใช้งาน
คุณสมบัติtable-layout
กำหนดอัลกอริทึมที่ใช้ในการจัดวางเซลล์ตาราง แถว และคอลัมน์
เคล็ดลับ:ประโยชน์หลักของการจัดวางตาราง: คงที่; คือตารางแสดงผลเร็วขึ้นมาก ในตารางขนาดใหญ่ ผู้ใช้จะไม่เห็นส่วนใดส่วนหนึ่งของตารางจนกว่าเบราว์เซอร์จะแสดงผลทั้งตาราง ดังนั้น หากคุณใช้ table-layout: fixed ผู้ใช้จะเห็นด้านบนของตารางในขณะที่เบราว์เซอร์โหลดและแสดงผลส่วนที่เหลือของตาราง ทำให้รู้สึกว่าหน้าโหลดเร็วขึ้นมาก!
ค่าเริ่มต้น: | รถยนต์ |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ไม่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS2 |
ไวยากรณ์ JavaScript: | วัตถุ .style.tableLayout="แก้ไข" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
table-layout | 14.0 | 5.0 | 1.0 | 1.0 | 7.0 |
ไวยากรณ์ CSS
table-layout: auto|fixed|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
auto | Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable content in the cells. The content will dictate the layout | |
fixed | Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS Table
การอ้างอิง HTML DOM: คุณสมบัติ tableLayout