Thuộc tính bố cục bảng CSS
Ví dụ
Đặt các thuật toán bố trí bảng khác nhau:
table.a {
table-layout: auto;
width: 180px;
}
table.b {
table-layout:
fixed;
width: 180px;
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính table-layout
xác định thuật toán được sử dụng để bố trí các ô, hàng và cột của bảng.
Mẹo: Lợi ích chính của việc bố trí bảng: cố định; là bảng hiển thị nhanh hơn nhiều. Trên các bảng lớn, người dùng sẽ không nhìn thấy bất kỳ phần nào của bảng cho đến khi trình duyệt hiển thị toàn bộ bảng. Vì vậy, nếu bạn sử dụng table-layout: fix, người dùng sẽ thấy phần đầu của bảng trong khi trình duyệt tải và hiển thị phần còn lại của bảng. Điều này mang lại ấn tượng rằng trang tải nhanh hơn rất nhiều!
Giá trị mặc định: | tự động |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS2 |
Cú pháp JavaScript: | object .style.tableLayout="fixed" Hãy thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
table-layout | 14.0 | 5.0 | 1.0 | 1.0 | 7.0 |
Cú pháp CSS
table-layout: auto|fixed|initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
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 | Demo ❯ |
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 | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Trang liên quan
Hướng dẫn CSS: Bảng CSS
Tham chiếu DOM HTML: thuộc tính tableLayout