Tôi muốn in một bảng lớn (quá lớn đến nỗi các hàng của nó rộng khoảng 3 tờ giấy) từ HTML. Nếu có thể, CSS đủ cho bố cục và giải pháp sẽ hoạt động với các trình duyệt khác nhau.In bảng HTML với nhiều cột/hàng bằng bố cục CSS?
tôi đang xác định các quy tắc phong cách sau:
table { page-break-inside:auto; }
tr { page-break-inside:auto; }
Khi tôi kiểm tra các yếu tố DOM ví dụ trong Firefox 33.0.2 (trên OS X) Tôi có thể thấy rằng các quy tắc được công nhận, nhưng sau đó khi tôi nhìn vào một bản xem trước in (file | In | PDF | Mở PDF trong Preview) tất cả các cột mà không phù hợp trên trang đầu tiên được cắt bỏ, tức là tôi nhận được 1 trang in ra thay vì 3. Tôi cũng đã thử Internet Explorer 11 và 10 cho cùng một hiệu ứng.
Vậy làm cách nào tôi có thể bố trí các bảng HTML lớn (cuối cùng lớn cả về cột một hàng) để in ra bằng cách sử dụng CSS?
Bonus câu hỏi: Nếu các thành phần phong cách trang-break thực sự chỉ áp dụng để ngăn chặn cấp các yếu tố như đã được nêu trong this câu trả lời trước, nó sẽ giúp đỡ nếu tôi xây dựng bảng của tôi từ div s thay vì td s khi nhắm đến sản lượng in?
CẬP NHẬT
Đây là một mẫu có liên quan mà tôi chỉ cố gắng trên JSFiddle. (Tôi không có tài khoản ở đó, vì vậy FWIK tôi không thể cung cấp một liên kết trực tiếp.)
HTML:
<body>
<table>
<tr>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</td>
</tr>
</table>
</body>
CSS:
table { page-break-inside:auto; }
td { border:1px solid lightgray; }
tr { page-break-inside:auto; }
Nếu tôi cố gắng để in bảng này (ví dụ: bằng cách áp dụng Khung này | In khung ... | PDF | Mở PDF ở chế độ xem trước tới JSFiddle's Kết quả xem trong Firefox 33.1 dành cho OS X và Kích thước giấy/Định hướng A4/Chân dung) Tôi nhận được một trang đầu ra. Tất cả các cột nhưng phần đầu tiên và phần thứ hai được cắt bỏ.
+1 Bạn có thể sửa đổi điều này để nó cung cấp cho một bảng ngang có toàn bộ chiều rộng in trên nhiều trang. Đây là những gì tôi dự định ban đầu. (Đây là câu trả lời hứa hẹn nhất cho đến nay.) – Drux
@Drux - Cập nhật bản gốc. Mừng vì tôi có thể giúp. –
Chờ đợi, tại sao sử dụng bố cục div cho dữ liệu dạng bảng khi có thể in '@media print {table, tbody, tr, th, td {display: block; }} '. +1 nhân tiện. –