Mam <table> danych, w których kolejne wiersze są konceptualnie powiązane i muszą pozostać razem. Grupuję każdą parę wierszy w tagu <tbody>. Kiedy przychodzi czas na wydrukowanie tabeli, chcę się upewnić, że przerwy między stronami występują tylko między tagami <tbody>.Przerwanie strony tylko między tbody podczas drukowania z Chrome
Próbowałem kilka odmian page-break-inside: avoid i page-break-after: auto, ale nie wydaje się uzyskać go do pracy w Chrome 42 (patrz zrzut ekranu poniżej)
Jednakże, nie wydaje się działać jako oczekiwane w Firefoksie 40 i IE 11. Wygląda na to, że page-break-* może mieć zastosowanie tylko do elementów na poziomie bloku. Czy istnieje dobry sposób na osiągnięcie tego w html/css?
Przykładowy kod:
<!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>
Oto JSFiddle że dam ci trochę pomysłu co próbuję osiągnąć.
Edit: I biorąc pod uwagę nie za pomocą tabeli, ale nie od (I) I Want My kolumny w kolejce, oraz (ii) I naprawdę nie ma się do szerokości kolumn ciężko kodu, aby upewnić się, że wszystko jest takie samo.
Nie mam wiele doświadczenie z tabel jeszcze, ale ja polecam do korzystania z niektórych divs with display: inline-block i span, ponieważ tabele są nieco skomplikowane ... – Hydro
Wskazówka: Należy unikać właściwości łamania strony w tabelach, elementach pływających i elementach bloków z ramkami. – Andrew