Am un proiect care necesită imprimarea unui tabel HTML cu mai multe rânduri.
Problema mea este cum este masa imprimate pe mai multe pagini. Se va reduce, uneori un rând în jumătate, făcând-o imposibil de citit pentru o jumătate este pe marginea sângerare de o pagină și restul este imprimat pe partea de sus a paginii următoare.
Singura plauzibilă soluție la care mă pot gândi este folosind stivuite DIVs în loc de o masă și forța pagina-pauze dacă este nevoie.. dar înainte de a merge prin tot schimbi am crezut că am putea cere de aici înainte.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tbody>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
Notă: atunci când se utilizează page-break-după:întotdeauna pentru <masă> tag-ul, se va crea o pagina de pauză după ultimul bit de masă, creând o în întregime pagină goală la sfârșitul de fiecare dată! Pentru a remedia acest lucru doar schimba la page-break-după:auto. Se va rupe în mod corect și de a nu crea un plus de pagină goală.
<html>
<head>
<style>
@media print
{
table { page-break-after:auto }
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
}
</style>
</head>
<body>
....
</body>
</html>
Extinderea de la Sinan Ünür soluție:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
div { page-break-inside:avoid; } /* This is the key */
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tr>
<td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
</tr>
<tr>
<td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
Se pare că `page-break-interior:pentru a evita în unele browsere, este luată în considerare pentru elemente bloc, nu pentru celule, masă, rând nici inline-block.
Dacă încerci să display:block
pe TR
tag-ul, și de a folosi acolo page-break-interior:evita
, functioneaza, dar se mai încurcă cu aspect de masă.
Niciunul dintre răspunsurile de aici a lucrat pentru mine în Chrome. AAverin pe GitHub au creat unele utile Javascript pentru acest scop]0 și aceasta a lucrat pentru mine:
Trebuie doar să adăugați js pentru codul dvs. și adăugați clasa 'splitForPrint' la masa ta și va frumos împărțită în masă în mai multe pagini și se adaugă antetul de tabel pe fiecare pagină.
Recent am rezolvat aceasta problema cu o soluție bună.
CSS:
.avoidBreak {
border: 2px solid;
page-break-inside:avoid;
}
JS:
function Print(){
$(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width", $(this).width() + "px") });
$(".tableToPrint tr").wrap("<div class='avoidBreak'></div>");
window.print();
}
Funcționează ca un farmec!
Am ajuns în urma @vicenteherrera's de abordare, cu unele tweak-uri (care sunt, eventual, bootstrap 3 specifice).
Practic, putem't rupe tr', sau
td ' pentru că're nu elemente de nivel bloc. Deci, vom încorpora div e în fiecare, și se aplică nostru
page-break-*reguli împotriva
div`. În al doilea rând, vom adăuga unele padding la partea de sus a fiecare din aceste diviziuni, pentru a compensa pentru orice stil de artefacte.
<style>
@media print {
/* avoid cutting tr's in half */
th div, td div {
margin-top:-8px;
padding-top:8px;
page-break-inside:avoid;
}
}
</style>
<script>
$(document).ready(function(){
// Wrap each tr and td's content within a div
// (todo: add logic so we only do this when printing)
$("table tbody th, table tbody td").wrapInner("<div></div>");
})
</script>
Marjă și padding au fost necesare ajustări pentru a compensa un fel de bruiaj, care a fost introdus (de parerea mea - de la bootstrap). Am'm nu sunt sigur că m-am'm a prezenta orice nouă soluție de alte răspunsuri la această întrebare, dar m-am gândit că poate asta va ajuta pe cineva.
M-am confruntat cu aceeasi problema si cauta peste tot pentru o soluție, în sfârșit, am gasit ceva care functioneaza pentru mine pentru toate browserele.
html {
height: 0;
}
utilizați această css sau în Loc de css poti avea acest javascript
$("html").height(0);
Sper că acest lucru va lucra pentru tine la fel de bine.
Am verificat multe soluții și nimeni nu't lucru bun.
Așa că am încercat un mic truc și funcționează:
tfoot cu stil:position: fixed; bottom: 0px;
este plasat în partea de jos a ultimei pagini, dar dacă subsolul este prea mare, este suprapus de conținutul de masă.
tfoot cu doar: display: table-subsol-grup;
e't s-au suprapus, dar nu este pe partea de jos a ultimei pagini...
Las's a pus două tfoot:
TFOOT.placer {
display: table-footer-group;
height: 130px;
}
TFOOT.contenter {
display: table-footer-group;
position: fixed;
bottom: 0px;
height: 130px;
}
<TFOOT class='placer'>
<TR>
<TD>
<!-- empty here
-->
</TD>
</TR>
</TFOOT>
<TFOOT class='contenter'>
<TR>
<TD>
your long text or high image here
</TD>
</TR>
</TFOOT>
Unul rezerve loc pe non-ultimele pagini, a doua pune în accual subsol.
Am'am incercat toate sugestiile prezentate mai sus și a găsit și simplu de lucru cu browser-ul cruce soluție pentru această problemă. Nu există stiluri sau pagina de pauză necesare pentru această soluție. Pentru soluție, formatul de tabel ar trebui să fie, cum ar fi:
<table>
<thead> <!-- there should be <thead> tag-->
<td>Heading</td> <!--//inside <thead> should be <td> it should not be <th>-->
</thead>
<tbody><!---<tbody>also must-->
<tr>
<td>data</td>
</tr>
<!--100 more rows-->
</tbody>
</table>
Format de mai sus testat și de lucru în cruce browsere
Ei bine Baieti... cele Mai multe dintre Soluțiile de până aici am't muncit. Deci, acest lucru este modul în care lucrurile lucrat pentru mine..
HTML
<table>
<thead>
<tr>
<th style="border:none;height:26px;"></th>
<th style="border:none;height:26px;"></th>
.
.
</tr>
<tr>
<th style="border:1px solid black">ABC</th>
<th style="border:1px solid black">ABC</th>
.
.
<tr>
</thead>
<tbody>
//YOUR CODE
</tbody>
</table>
Primul set de cap este folosit ca un manechin, astfel încât nu va't fi o lipsă de sus de frontieră în al 2-lea cap(de exemplu, capul original), în timp ce pagina de pauză.
La răspunsul acceptat nu au de lucru pentru mine în toate browserele, dar în urma css au de lucru pentru mine:
tr
{
display: table-row-group;
page-break-inside:avoid;
page-break-after:auto;
}
Structura html a fost:
<table>
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
...
</tbody>
</table>
În cazul meu, au existat unele probleme suplimentare cu thead tr`, dar asta a rezolvat problema originală de a menține masa rânduri la rupere.
Din cauza antet probleme, în cele din urmă am ajuns cu:
#theTable td *
{
page-break-inside:avoid;
}
Asta nu't preveni rânduri de rupere; doar fiecare celulă's de conținut.