Büyük bir HTML tablosunu yazdırırken sayfa sonlarıyla nasıl başa çıkılır?

Çok sayıda satır içeren bir HTML tablosunun yazdırılmasını gerektiren bir projem var.

Benim sorunum tablonun birden fazla sayfaya yazdırılma şekli. Bazen bir satırı ikiye bölerek okunamaz hale getiriyor çünkü bir yarısı sayfanın taşan kenarında kalıyor ve geri kalanı bir sonraki sayfanın üstüne yazdırılıyor.

Aklıma gelen tek makul çözüm, tablo yerine yığılmış DIV'ler kullanmak ve gerekirse sayfa sonlarını zorlamak... ancak tüm değişikliği yapmadan önce burada sorabileceğimi düşündüm.

Jeremy W
Edited question 2016ösp37ös19 Haziran 2016 в 7:37
Programlama
printing html css html-table
2009ösp24ös14 Kasım 2009 в 2:24
4 görünümler
Çözüm



<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Test

    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }



    <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>

        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
Wassim Sboui
Edited answer 2016ösp25ös14 Nisan 2016 в 2:25
Yorumlar (16)

Not:

etiketi için page-break-after:always kullanıldığında, tablonun son kısmından sonra bir sayfa sonu oluşturacak ve her seferinde sonunda tamamen boş bir sayfa oluşturacaktır! Bunu düzeltmek için page-break-after:auto olarak değiştirmeniz yeterlidir. Doğru şekilde kesilecek ve fazladan boş bir sayfa oluşturmayacaktır.




@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 }
}




....
Yorumlar (2)

Bu CSS özelliklerini kullanın:

page-break-after

page-break-before

Mesela:




@media print
{
table {page-break-after:always}
}




....

aracılığıyla

Chris
Edited answer 2012ösp32ös20 Ağustos 2012 в 8:32
Yorumlar (4)