Thuộc tính bố cục bảng CSS
Thí dụ
Đặt các thuật toán bố cục bảng khác nhau:
table.a {
table-layout: auto;
width: 180px;
}
table.b {
table-layout:
fixed;
width: 180px;
}
Định nghĩa và Cách sử dụng
Thuộc table-layout
tính xác định thuật toán được sử dụng để sắp xếp các ô, hàng và cột trong bảng.
Mẹo: Lợi ích chính của bố cục 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: fixed, người dùng sẽ thấy phần trên cùng 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 tạo ấ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ỗ 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 | 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 |
Các trang liên quan
Hướng dẫn CSS: Bảng CSS
Tham chiếu DOM HTML: thuộc tính tableLayout