Hướng dẫn css print table cut off - bảng in css bị cắt

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.









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

Hướng dẫn css print table cut off - bảng in css bị cắt

Hướng dẫn css print table cut off - bảng in css bị cắt

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:

@media print { table, table tr td, table tr th { page-break-inside: avoid; } }

Code language: CSS (css)

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 handle inline-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 "

    @media print { table, table tr td, table tr th { page-break-inside: avoid; } }

    Code language: CSS (css)
    0". Bạn nên sử dụng "

    @media print { table, table tr td, table tr th { page-break-inside: avoid; } }

    Code language: CSS (css)
    1" (định vị mặc định) để in.

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.

Hướng dẫn css print table cut off - bảng in css bị cắt

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.

Làm thế nào để bạn sửa chữa các yếu tố HTML bị cắt khi in?

Khi bạn in (hoặc xem trước in) và các phần 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 phần tử nào có "Hiển thị: Block-block" bao quanh nội dung của bạn không? Hãy chắc chắn rằng nó có "Hiển thị: Khối" để in.check your CSS rules for these: Is there an element with " display: inline-block " that surrounds your content? Make sure it has " display: block " for printing.

Làm cách nào để giữ cho các bảng HTML không chia tách trên các trang?

Để ngăn chặn một bảng được chia theo một số trang, bắt buộc phải áp dụng các kiểu ngắt trang và các kiểu phá vỡ trang cho tất cả các nội dung của nó.Thủ thuật này hoạt động trừ khi bảng chiếm nhiều không gian hơn một trang đầy đủ.Cũng có thể sử dụng các kiểu tùy chỉnh.apply the page-break-inside and page-break-after styles to all of its contents. This trick works unless the table occupies more space than a full page. It is also possible to use custom styles.

@Media in là gì?

Phương tiện in là một trong những hình thức truyền thông đại chúng lâu đời nhất và cơ bản.Nó bao gồm các tờ báo, tuần lễ, tạp chí, tháng và các hình thức khác của các tạp chí in.Một sự hiểu biết cơ bản về các phương tiện truyền thông in là rất cần thiết trong nghiên cứu về truyền thông đại chúng.one of the oldest and basic forms of mass communication. It includes newspapers, weeklies, magazines, monthlies and other forms of printed journals. A basic understanding of the print media is essential in the study of mass communication.

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

Đặt mã ngắt dòng trong văn bản tại (các) điểm bạn muốn dòng bị phá vỡ..