Bố trí bảng - Thủ thuật CSS

Các table-layoutđịnh nghĩa tài sản gì thuật toán trình duyệt nên sử dụng để đặt ra hàng bảng, các tế bào, và cột.

table ( table-layout: fixed; )

Như đã giải thích trong đặc điểm kỹ thuật CSS2.1, bố cục bảng nói chung thường là vấn đề sở thích và sẽ khác nhau tùy thuộc vào lựa chọn thiết kế. Tuy nhiên, trình duyệt sẽ tự động áp dụng các ràng buộc nhất định sẽ xác định cách trình bày các bảng. Điều này xảy ra khi thuộc table-layouttính được đặt thành auto(mặc định). Nhưng những ràng buộc này có thể được dỡ bỏ khi table-layoutđược đặt thành fixed.

Giá trị

auto: mặc định. Thuật toán tự động của trình duyệt được sử dụng để xác định cách các hàng, ô và cột của bảng được trình bày. Bố cục bảng kết quả thường phụ thuộc vào nội dung của bảng.
fixed: Với giá trị này, bố cục của bảng bỏ qua nội dung và thay vào đó sử dụng chiều rộng của bảng, bất kỳ chiều rộng được chỉ định nào của các cột cũng như giá trị đường viền và khoảng cách ô. Giá trị cột được sử dụng dựa trên độ rộng được xác định trên cột hoặc ô cho hàng đầu tiên của bảng.
inherit: chỉ ra rằng giá trị được kế thừa từ table-layoutgiá trị của giá trị gốc của nó

Để giá trị của fixedcó bất kỳ tác dụng nào, chiều rộng của bảng phải được đặt thành một thứ khác với auto(mặc định cho thuộc widthtính). Trong các bản trình diễn bên dưới, tất cả độ rộng của bảng được đặt thành 100%, giả sử chúng ta muốn bảng lấp đầy vùng chứa mẹ của nó theo chiều ngang.

Cách tốt nhất để xem tác động của thuật toán bố cục bảng cố định là sử dụng bản trình diễn.

Xem Pen Demo cho thuộc tính bố cục bảng của CSS của Louis Lazaris (@impressionwebs) trên CodePen.

Khi bạn lần đầu tiên xem bản trình diễn trên, bạn sẽ nhận thấy bố cục của các cột trong bảng không cân đối và khó hiểu. Tại thời điểm đó, bảng đang sử dụng thuật toán mặc định của trình duyệt để xác định cách sắp xếp bảng, có nghĩa là nội dung sẽ quyết định bố cục. Bản trình diễn phóng đại thực tế này bằng cách bao gồm một chuỗi văn bản dài bên trong một ô bảng, trong khi tất cả các ô bảng khác chỉ sử dụng hai từ mỗi ô. Như bạn có thể thấy, trình duyệt mở rộng cột đầu tiên để chứa phần nội dung lớn hơn.

Nếu bạn nhấp vào nút “Chuyển đổi bố cục bảng: cố định”, bạn sẽ thấy bố cục bảng trông như thế nào khi sử dụng thuật toán “cố định”. Khi table-layout: fixedđược áp dụng, nội dung không còn quyết định bố cục nữa mà thay vào đó, trình duyệt sử dụng bất kỳ độ rộng xác định nào từ hàng đầu tiên của bảng để xác định độ rộng cột. Nếu không có độ rộng nào xuất hiện trên hàng đầu tiên, thì độ rộng cột được chia đều trên bảng, bất kể nội dung bên trong ô.

Các ví dụ khác có thể giúp làm rõ hơn điều này. Trong bản trình diễn sau, bảng có một phần tử có phần tử đầu tiên có chiều rộng 400px. Lưu ý trong trường hợp này, bật tắt table-layout: fixedkhông có tác dụng.

Xem Pen Demo cho thuộc tính bố cục bảng của CSS của Louis Lazaris (@impressionwebs) trên CodePen.

Điều này xảy ra bởi vì thuật toán bố cục mặc định về cơ bản nói rằng "tạo cột đầu tiên rộng 400px và phân phối các cột còn lại dựa trên nội dung của chúng". Vì ba cột còn lại có cùng nội dung với nhau nên sẽ không có gì thay đổi. Nhưng bây giờ hãy thêm một số nội dung văn bản bổ sung vào một trong các cột khác:

Xem Pen Demo cho thuộc tính bố cục bảng của CSS với chiều rộng cột và nội dung thay đổi của Louis Lazaris (@impressionwebs) trên CodePen.

Bây giờ, nếu bạn nhấp vào nút bật tắt, bạn sẽ thấy các cột điều chỉnh để phù hợp với bố cục cố định, bất kể nội dung. Một lần nữa, điều tương tự đang xảy ra; cột đầu tiên được đặt ở 400px, sau đó các cột còn lại được chia đều. Nhưng lần này, vì một trong các cột có nội dung phụ, nên sự khác biệt là đáng chú ý.

Cách thuật toán bố cục cố định xác định độ rộng cột

Hai bản trình diễn sau đây sẽ giúp hiểu rằng hàng đầu tiên của bảng là thứ giúp xác định độ rộng cột của một nhóm bảng table-layout: fixed.

Xem Pen Demo cho bố cục bảng của CSS với ô ở hàng 1 do Louis Lazaris (@impressionwebs) cung cấp trên CodePen.

Trong bản trình diễn ở trên, ô đầu tiên trong hàng đầu tiên của bảng có chiều rộng là 350px. Việc chuyển đổi table-layout: fixedsẽ điều chỉnh các cột khác, nhưng cột đầu tiên vẫn giữ nguyên. Bây giờ hãy thử bản demo sau:

Xem Pen Demo cho bố cục bảng của CSS với ô ở hàng 2 do Louis Lazaris (@impressionwebs) cung cấp trên CodePen.

Trong trường hợp này, đó là hàng thứ hai có chiều rộng gắn với ô bảng đầu tiên của nó. Bây giờ khi nhấp vào nút bật tắt, tất cả độ rộng của cột được điều chỉnh. Một lần nữa, điều này là do thuật toán bố cục cố định đang sử dụng hàng đầu tiên để xác định độ rộng của cột và kết quả cuối cùng là nó phân phối độ rộng bằng nhau.

Lợi ích của thuật toán bố cục cố định

Các lợi ích thẩm mỹ của việc sử dụng table-layout: fixedphải rõ ràng từ các minh chứng ở trên. Nhưng lợi ích chính khác là hiệu suất. Thông số đề cập đến thuật toán cố định là một thuật toán "nhanh" và vì lý do chính đáng. Trình duyệt không cần phải phân tích toàn bộ nội dung của bảng trước khi xác định kích thước của các cột; nó chỉ cần phân tích hàng đầu tiên. Vì vậy, kết quả là xử lý bố cục của bảng nhanh hơn.