Làm thế nào để bạn phá vỡ một bảng trong html?

Đọc đoạn mã của chúng tôi nếu bạn cần in một bảng HTML có nhiều hàng trên nhiều trang. Với mục đích đó, bạn sẽ cần thuộc tính CSS page-break-inside, thuộc tính này giúp chỉ định cách tài liệu sẽ hoạt động khi được in.

Ví dụ về xử lý ngắt trang khi in một bảng lớn

Trong ví dụ của chúng tôi, chúng tôi đặt thuộc tính ngắt trang thành “tự động” cho phần tử và sử dụng giá trị “tránh” cho phần tử. Ngoài ra, chúng tôi đã thêm thuộc tính ngắt trang sau vào và sau đó, chỉ định thuộc tính hiển thị với các giá trị “table-header-group” và “table-footer-group” tương ứng cho các phần tử và

Để ngăn bảng bị chia thành nhiều trang, bắt buộc phải áp dụng kiểu ngắt trang bên trong và ngắt trang sau cho tất cả nội dung của bảng. Thủ thuật này hoạt động trừ khi bảng chiếm nhiều không gian hơn toàn trang

Ghi chú. Flexbox không được hỗ trợ trong Internet Explorer 10 và các phiên bản cũ hơn. Tùy bạn muốn dùng float hay flex. Tuy nhiên, nếu bạn cần hỗ trợ cho IE10 trở xuống, bạn nên sử dụng float

Mẹo. Để tìm hiểu thêm về Mô-đun bố cục hộp linh hoạt, hãy đọc chương CSS Flexbox của chúng tôi

Thêm phản hồi

Ví dụ trên sẽ không đẹp mắt trên thiết bị di động vì hai cột sẽ chiếm quá nhiều dung lượng của trang. Để tạo một bảng đáp ứng, nên chuyển từ bố cục hai cột sang bố cục toàn chiều rộng trên thiết bị di động, hãy thêm các truy vấn phương tiện sau

When the text in a single table cell exceeds a few words, a line break may improve the appearance and readability of the table. The line break code allows data to be split into multiple lines. Place the line break code
within the text at the point(s) you want the line to break. Notice in the examples below that the line break code can be used in data cells as well as in headers.

Hãy nhớ rằng người dùng tài liệu của bạn có quyền kiểm soát cuối cùng đối với phông chữ và kích thước. Một số mã ngắt dòng, mặc dù phù hợp với cài đặt tùy chọn của bạn, nhưng có thể không phù hợp trong các điều kiện khác