Birçok satır içeren bir HTML tablosu yazdırmayı gerektiren bir proje var.
Benim sorunum tablonun birden fazla sayfaya yazdırılma şeklidir. Bazen bir satırı ikiye böler, bu da okunamaz hale gelir, çünkü yarısı bir sayfanın kanayan kenarında ve geri kalanı bir sonraki sayfanın üstüne yazdırılır.
Aklıma gelen tek mantıklı çözüm, bir tablo yerine yığılmış DIV'leri kullanmak ve gerekirse sayfa sonlarını zorlamaktır ... ancak tüm değişikliği yapmadan önce daha önce burada sorabileceğimi düşündüm.
Yanıtlar:
<!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: sayfa sonu karakterini kullanırken: her zaman etiket için tablonun son bitinden sonra bir sayfa sonu oluşturur ve sonunda her seferinde tamamen boş bir sayfa oluşturur! Bunu düzeltmek için sadece sayfa sonu olarak değiştirin: auto. Düzgün kırılır ve fazladan boş bir sayfa oluşturmaz.
<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>Sinan Ünür çözümünden genişleyen:
<!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>Gibi görünüyor page-break-inside:avoidbazı tarayıcılarda sadece hücre, masa, sıranın ne inline-block, blok elemanları dikkate alınır.
Eğer denerseniz etiketi ve orada kullanmak , bu tablo düzeniyle etrafında çalışır, ancak Messes.display:blockTRpage-break-inside:avoid
$(document).ready(function(){$("table tbody th, table tbody td").wrapInner("<div></div>");});
tr { display: block; }Tüm harici <div>öğeleri eklemek yerine , @media CSS ayarını Yalnızca Baskı için ayarlamayı deneyebilirsiniz . (Test etmedik ama bakmaya değer)
Buradaki yanıtların hiçbiri Chrome'da benim için çalışmadı. GitHub'daki AAverin bu amaç için bazı yararlı Javascript oluşturdu ve bu benim için çalıştı:
Sadece kodunuzu js ekleyin ve 'splitForPrint' sınıfını tablonuza ekleyin ve tabloyu düzgün bir şekilde birden çok sayfaya böler ve tablo başlığını her sayfaya ekler.
splitForPrintama JS hiçbir yerde className kullanarak öğenin başvuru aldı splitForPrint. Sadece nerede olduğu var splitClassName = 'splitForPrint';ama bu kadar.
Bu CSS özelliklerini kullanın:
page-break-after
page-break-before Örneğin:
<html>
<head>
<style>
@media print
{
table {page-break-after:always}
}
</style>
</head>
<body>
....
</body>
</html>Kısa bir süre önce bu sorunu iyi bir çözümle çözdüm.
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();
}Tıkır tıkır çalışıyor!
@ Vicenteherrera'nın yaklaşımını izledim, bazı tweaks (muhtemelen bootstrap 3'e özgü).
Temelde; Biz kıramazsak trs ya tdda blok seviyesinden elemanlar değil, çünkü bu. Bu yüzden divher birine gömdük ve page-break-*kurallarımızı div. İkincisi; stil artefaktlarını telafi etmek için bu div'lerin her birinin üstüne biraz dolgu ekliyoruz.
<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>Kenar boşluğu ve dolgu ayarlamaları, benim tahminime göre - bootstrap'tan gelen bir çeşit titremeyi dengelemek için gerekliydi. Bu sorunun diğer cevaplarından yeni bir çözüm sunduğumdan emin değilim, ama belki de bunun birisine yardımcı olacağını düşünüyorum.
Birçok çözümü kontrol ettim ve kimse iyi çalışmadı.
Bu yüzden küçük bir numara denedim ve işe yarıyor:
stilde tfoot: position: fixed; bottom: 0px;
son sayfanın altına yerleştirilir, ancak altbilgi çok yüksekse tablonun içeriği ile çakışır.
tfoot with only: örtüşmüyor display: table-footer-group;
, ancak son sayfanın altında değil ...
İki adım atalım:
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>Bir rezerv son olmayan sayfalara yerleştirilir, ikincisi ise altbilginizi alır.
Yukarıda verilen tüm önerileri denedim ve bu sorun için basit ve çalışan çapraz tarayıcı çözümü buldum. Bu çözüm için stil veya sayfa sonu gerekmez. Çözüm için tablonun biçimi aşağıdaki gibi olmalıdır:
<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>Yukarıdaki format test edilmiş ve çapraz tarayıcılarda çalışmaktadır
Peki beyler ... Buradaki Çözümlerin çoğu işe yaramadı. Benim için işler böyle yürüdü ..
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>İlk kafa kümesi, sayfa sonu sırasında 2. kafada (yani orijinal kafa) eksik bir üst kenarlık olmayacak şekilde kukla olarak kullanılır.
Kabul edilen cevap tüm tarayıcılarda benim için çalışmadı, ancak aşağıdaki css benim için işe yaradı:
tr
{
display: table-row-group;
page-break-inside:avoid;
page-break-after:auto;
}Html yapısı:
<table>
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
...
</tbody>
</table>Benim durumumda, ile ilgili bazı ek sorunlar vardı thead tr, ancak bu, tablo satırlarının kırılmasını önleyen orijinal sorunu çözdü.
Başlık sorunları nedeniyle, sonuçta:
#theTable td *
{
page-break-inside:avoid;
}Bu, satırların kırılmasını engellemedi; sadece her hücrenin içeriği.
<thead>aşağıdaki css ile a eklemeye değer olabilirthead {display: table-header-group; }(loooooong veri tabloları için yararlıdır).