Ho un <table> dei dati in cui righe consecutive sono concettualmente connessi e hanno bisogno di stare insieme. Ho raggruppato ogni coppia di righe in un tag <tbody>. Quando arriva il momento di stampare il tavolo, voglio assicurarmi che le interruzioni di pagina avvengano solo tra i tag <tbody>.Interruzione di pagina solo tra tbody quando si stampa da Chrome
ho provato alcune variazioni di page-break-inside: avoid e page-break-after: auto, ma non riesco a farlo funzionare in Chrome 42 (vedi immagine sotto)
Tuttavia, non sembra funzionare come previsto in Firefox 40 e IE 11 però. Sembra che page-break-* si possa applicare solo agli elementi a livello di blocco. C'è un buon modo per farlo in html/css?
codice Esempio:
<!doctype html>
<html>
<head>
<style>
table {
width: 70%;
border-collapse: collapse;
}
thead {
display: table-header-group;
text-align: left;
border-bottom: 2px solid #000;
}
tbody {
page-break-inside: avoid;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Project #</th>
<th>Owner</th>
<th>% Complete</th>
</tr>
</thead>
<tbody>
<tr>
<td>HR-123</td>
<td>Arther Dent</td>
<td>42%</td>
</tr>
<tr>
<td colspan='3'>Description: Find travel guide to get me back to earth.</td>
</tr>
</tbody>
<tbody>
<tr>
<td>RD-123</td>
<td>Frodo Baggins</td>
<td>9%</td>
</tr>
<tr>
<td colspan='3'>Description: Find a better way to get the ring to Mordor.</td>
</tr>
</tbody>
<!-- repeat tbody sections as necessary to get onto the second page -->
</table>
</body>
</html>
Ecco un JSFiddle che ti do un po 'di un'idea di quello che sto cercando di realizzare.
Edit: mi considerando non utilizza un tavolo, ma non l'ha fatto in quanto (i) Voglio che i miei colonne di line up, e (ii) io davvero non voglio hard-code larghezza delle colonne per assicurarsi che essi Sei lo stesso.
io non sono molto esperto con tavoli ancora, ma vi consiglio di utilizzare un po ' div con display: inline-block e la durata, perché i tavoli sono un po 'complessa ... – Hydro
Tip: Evitare proprietà page-break all'interno di tabelle, elementi galleggianti, e gli elementi di blocco con bordi. – Andrew