Tôi biết câu hỏi này đã ở đây rất nhiều lần, nhưng tôi đã không tìm thấy câu trả lời đặc biệt giải quyết câu hỏi của tôi. Tôi có một bảng mà tôi đang cố gắng in rộng 16 cột. Tất nhiên, phía bên phải chỉ cắt giảm trong mỗi trình duyệt. Tôi đang cố gắng tìm ra một cách để ngăn chặn điều đó xảy ra. Ở phía dưới là một bảng mẫu, hãy thử in nó và bên phải cắt ra. Dưới đây là những tùy chọn không may tôi không thể làm được:
- Buộc chế độ cảnh quan
- Sử dụng
word-break:break-all
. Nó chỉ không đẹp
Lý tưởng nhất là tôi chỉ muốn bảng chiếm nhiều chiều rộng như nó cần, và nếu có quá nhiều nội dung thì chỉ cần quấn nó bình thường để các chữ cái trong các từ ở lại với nhau.
body {
font-size: 12pt;
font-family: Garamond, Serif;
}
table {
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 15px;
font-size: 1.2em;
}
td, th {
padding: 2px 2px 2px 5px;
border: 1px solid #000000;
}
tr.tableTitle {
font-size: 1.2em;
font-weight: bold;
text-align: center;
background: #d0d0d0;
}
thead tr {
font-weight: bold;
background: #f0f0f0;
text-align: center;
}
button.expander {
border: 1px solid black;
border-radius: 5px;
color: black;
font-family: Verdana, Serif;
font-size: 1em;
font-weight: bold;
cursor: pointer;
float: left;
margin: 0px 5px 10px 0px;
background: #ffffff;
}
@media print {
button.expander{
display: none;
margin: 0px;
}
}
-
Table Header
Column A
Column B Column B Column B
Column C
Column D
Column E
Column F
Column G Column G
Column H
Column I
Column J
Column K
Column L
Column M
Column N
Column O
Column P
Column text here Column text here
Column text here Column text here
Column text here Column text here
Column text here Column text here
Column text here Column text here
Column text here Column text here
Column text here Column text here
Column text here Column text here
Column text here Column text here
Column text here Column text here
Column text here Column text here
Column text here Column text here
Column text here Column text here
Column text here Column text here
Column text here Column text here
Column text here Column text here
Có phải bảng của bạn đang được chia khi cố gắng in chúng? Bảng HTML bắt đầu trong một trang và theo sau bị cắt tiếp theo?
Tôi đã có cùng một vấn đề và may mắn là tôi đã tìm thấy một giải pháp hoạt động trên tất cả các trình duyệt [Chrome, Safari, Firefox, IE8, Internet Explorer 11].works across all browsers [Chrome, Safari, Firefox, IE8, Internet Explorer 11].
Sử dụng thuộc tính phá vỡ trang, được chia thành ba:page-break property, which is divided in three:
- page-break-after
- page-break-before
- page-break-inside
Sau khi thử nhiều kết hợp, tôi đã tìm thấy một kết hợp chỉ hoạt động:
Code language: CSS [css]
@media print { table, table tr td, table tr th { page-break-inside: avoid; } }
Thông tin thêm về trang phá vỡ trang trên MDN.
Đăng khoảng 5 năm trước. Có thể nhìn thấy cho công chúng.
Khi bạn in [hoặc xem trước in] và các yếu tố sẽ bị cắt [ví dụ: sau trang 1 hoặc "ngẫu nhiên"], bạn nên kiểm tra các quy tắc CSS của mình cho những điều này:
Có một yếu tố nào có "
display: inline-block
" bao quanh nội dung của bạn không? Hãy chắc chắn rằng nó có "display: block
" để in. Điều này chủ yếu ảnh hưởng đến Firefox và Internet Explorer. Chrome dường như có thể xử lý các yếu tốinline-block
trong hầu hết các trường hợp.
This primarily affects Firefox and Internet Explorer. Chrome seems to be able to handleinline-block
elements in most cases.Bản thân phần tử, hoặc một container, xác định "
overflow: hidden
"? Sử dụng "overflow: auto
" [hoặc có thể "overflow: visible
"] thay thế.Là chính phần tử hoặc một container, sử dụng "
position: absolute
" hoặc "
0". Bạn nên sử dụng "
Code language: CSS [css]@media print { table, table tr td, table tr th { page-break-inside: avoid; } }
1" [định vị mặc định] để in.
Code language: CSS [css]@media print { table, table tr td, table tr th { page-break-inside: avoid; } }
Lưu ý rằng kết xuất in khác nhau giữa các trình duyệt thậm chí nhiều hơn kết xuất màn hình.
Kiểm tra cuốn sách điện tử mới của chúng tôi:
Học cách cấu trúc Ruby lớn trên các cơ sở mã Rails với các công cụ bạn đã biết và yêu thích.