如何设置A4横向打印并让多表格页面适配单页？
2026-5-9
Fixing A4 Landscape Print Layout for Multi-Table Page
Let's get your multi-table document to fit perfectly on a single A4 landscape page without unwanted page breaks. Here's the adjusted code with key print style improvements:
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>View JTC</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style type="text/css"> .verticaltext { writing-mode: vertical-rl; text-orientation: mixed; } @media print { html, body { height: 100vh; width: 100vw; margin: 0 !important; padding: 0 !important; overflow: hidden; } /* Override Bootstrap container padding/margins for print */ .container-fluid { width: 100% !important; padding: 0 10px !important; margin: 0 !important; } /* Prevent page breaks inside or after tables */ table { page-break-inside: avoid !important; page-break-after: avoid !important; width: 100% !important; font-size: 11px; /* Reduce font size slightly to save space */ } /* Set A4 landscape with minimal margins */ @page { size: A4 landscape; margin: 10mm; /* Add small margin to avoid content being cut off */ } /* Optional: Scale content if needed to fit perfectly */ body { transform: scale(0.95); transform-origin: top left; height: auto !important; } } </style> </head> <body> <section class="container-fluid"> <table class="table table-sm table-bordered table-condensed"> <tr> <th style="width: 30%; vertical-align: middle; text-align: center;">logo</th> <th colspan="2" style="text-align: center; width: 70%">company</th> </tr> <tr> <th rowspan="2" style="text-align: center; vertical-align: middle;">Job Travel Card</th> <th style="width: 10%;">JTC No:</th> <th></th> </tr> <tr> <th>Date</th> <th></th> </tr> </table> <table class="table table-sm table-bordered table-condensed"> <tr> <td style="width: 10%; text-align: left;">Project Number</td> <td style="width: 15%; text-align: left;" colspan="2"></td> <td style="width: 10%; text-align: left;">Unit No. / Tag No.</td> <td style="width: 15%; text-align: left;" colspan="4"></td> </tr> <tr> <td>Area Number</td> <td colspan="2"></td> <td>Material Class</td> <td colspan="4"></td> </tr> <tr> <td style="width: 15%; text-align: left;">Drawing No: / ISO Number</td> <td style="width: 15%; text-align: left;"></td> <td style="width: 15%; text-align: left;">JC No:</td> <td style="width: 15%; text-align: left;"></td> <td style="width: 10%; text-align: left;">Sheet No</td> <td style="width: 15%; text-align: left;"></td> <td style="width: 10%; text-align: left;">Rev. No.</td> <td style="width: 15%; text-align: left;"></td> </tr> <tr> <td style="width: 15%; text-align: left;">Item Description</td> <td style="width: 15%; text-align: left;" colspan="2"></td> <td style="width: 15%; text-align: left;">ITP Stage Nos.</td> <td style="width: 15%; text-align: left;" colspan="4"></td> </tr> </table> <!-- Fitup data table-sm --> <table class="table table-bordered table-condensed"> <tr> <th rowspan="12" style="text-align: center; vertical-align: middle;"> <span class="verticaltext"> Fabrication Assembly Fit-Up </span> </th> <th style="text-align: center; vertical-align: middle;" rowspan="2">Weld/joint No</th> <th style="text-align: center; vertical-align: middle;" rowspan="2">Item/Position No.</th> <th colspan="2">Material Spec Grade</th> <th style="text-align: center; vertical-align: middle;" rowspan="2">Size</th> <th style="text-align: center; vertical-align: middle;" rowspan="2">Thickness</th> <th colspan="2">Heat/Plate/TestNo</th> <th style="text-align: center; vertical-align: middle;" rowspan="2">Welder No. for tracking</th> <th colspan="2">Fitup Result</th> <th style="text-align: center; vertical-align: middle;" rowspan="2">Date</th> <th style="text-align: center; vertical-align: middle;" rowspan="2">Sign</th> </tr> <tr> <th>Material 1</th> <th>Material 2</th> <th>Material 1</th> <th>Material 2</th> <th>Accept</th> <th>Reject</th> </tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr> <td colspan="4">Name & Signature of fabrication foreman</td> <td colspan="2">Released to</td> <td colspan="2"><input type="checkbox"> QC/NDE/DIM.</td> <td colspan="2"><input type="checkbox"> Welding</td> <td colspan="4"><input type="checkbox"> Fabrication/Assembly</td> </tr> <tr> <td colspan="7">Date</td> <td colspan="7">Date</td> </tr> </table> <!-- welding data --> <table class="table table-bordered table-condensed"> <tr> <th rowspan="13" style="text-align: center; vertical-align: middle;"> <span class="verticaltext"> Welding Details </span> </th> <th style="text-align: center; vertical-align: middle;" rowspan="3">Joint No</th> <th style="text-align: center; vertical-align: middle;" rowspan="3">WPS No.</th> <th colspan="3" class="text-center">Welding Process</th> <th colspan="3" class="text-center">Welder/Operation No.</th> <th colspan="2" rowspan="2" class="text-center">Visual Inspection</th> <th style="text-align: center; vertical-align: middle;" rowspan="3">Date</th> <th style="text-align: center; vertical-align: middle;" rowspan="3">Sign</th> </tr> <tr> <th colspan="3" class="text-center">Passes</th> <th colspan="3" class="text-center">Passes</th> </tr> <tr> <th class="text-center">Root/Hot</th> <th class="text-center">Fill</th> <th class="text-center">Cap</th> <th class="text-center">Root/Hot</th> <th class="text-center">Fill</th> <th class="text-center">Cap</th> <th class="text-center">Accept</th> <th class="text-center">Reject</th> </tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr> <td colspan="4">Name & Signature of fabrication foreman</td> <td colspan="3">Released to</td> <td colspan="2"><input type="checkbox"> QC/NDE/DIM.</td> <td colspan="1"><input type="checkbox"> Welding</td> <td colspan="4"><input type="checkbox"> Fabrication/Assembly</td> </tr> <tr> <td colspan="14">Name & Signature of QC Personel</td> </tr> <tr> <td colspan="7">Date</td> <td colspan="7">Date</td> </tr> </table> </section> </body> </html>
Key Improvements Explained:
- Bootstrap Container Override: We reset
.container-fluid's padding and margins for print, since Bootstrap's defaults can add unnecessary space that pushes content onto a new page. - Enhanced Page Break Prevention: Added
page-break-after: avoid !importantto tables to stop breaks right after a table, and ensuredpage-break-insideis enforced strongly. - A4 Landscape with Margins: Updated the
@pagerule to include small margins (10mm) so content doesn't get cut off by printer borders. - Font Size Adjustment: Reduced table font size to 11px to save horizontal space without making text unreadable.
- Optional Scaling: The
transform: scale(0.95)on the body lets you fine-tune how content fits – adjust the scale value (between 0.8-1.0) if your full 10-row tables still need a bit more room. - Vertical Text Fix: Added a base style for
.verticaltextto ensure it renders correctly across browsers in print mode.
Test this by opening the page, pressing Ctrl+P (Cmd+P on Mac), and verifying the print preview shows all content on a single landscape A4 page.
内容的提问来源于stack exchange，提问作者Alvin John Babu
