Sonraki sayfalarda özel başlık ile html tablosunu yazdır

Tablo içeren bir html varsa ve yazdırmak istediğinizde, tablo, tablonun ne kadar uzunluğuna bağlı olarak bölünebilir veya bölünmeyebilir. o ayrılması halinde orada ekleyebilir bunu yapmak için, tablonun başlığını tekrarlamak için bir yoldur:Sonraki sayfalarda özel başlık ile html tablosunu yazdır

thead { 
    display: header-table-group; 
}

Ne yapmak istediğim ilk sayfayı atlamak için, bu yüzden sadece başlık sonraki sayfalarda gösterecektir .

Bunu yapmanın bir yolu var mı?

kaynak

2012-09-10 Hassek

Thur: ilk çocuk çalışması? Veya tablo aslında etiketlere bölünür (yani,

.....

....) – Lowkase

Tarayıcının yaptığı bir şey olduğu için nasıl ayrıldığını hiçbir fikrim yok ve denetlememe izin vermiyor. Ben bir deneyin ve – Hassek

cevabı vereceğim ne yazık ki işe yaramıyor ama makul bir yaklaşımdı. Teşekkürler – Hassek

cevap

<thead>'unuz sabit bir yüksekliğe sahipse, ilk sayfada gizlemek oldukça kolaydır. Tek yapmanız gereken, tabloyu div içinde overflow: hidden; ile doldurmak ve daha sonra üstbilgisini gizlemek için tabloya negatif bir üst kenar boşluğu eklemektir.

Örnek: başlık sadece Chrome, Safari veya Opera içermez tablo başlıkları, tekrar destekleyen tarayıcılarda sonraki sayfalarda göstereceği

<style> 
    .headless { 
    overflow: hidden; 
    line-height: 20px; 
    } 
    .headless > table { 
    margin-top: -22px; 
    border-spacing: 0; 
    } 
    .headless > table > * > tr > * { 
    border-right: 2px solid black; 
    border-bottom: 2px solid black; 
    padding: 0 4px 0 4px; 
    } 
    .headless > table > * > tr > :first-child {border-left: 2px solid black;} 
    .headless > table > thead > :first-child > th {border-top: 2px solid black;} 
</style> 

<div class="headless"> 
    <table> 
    <thead> 
     <tr> 
     <th>Header</th> 
     <th>Header</th> 
     <th>Header</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     </tr> 
     <tr> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     </tr> 
    </tbody> 
    </table> 
</div>

Not.

kaynak

2014-09-10 22:21:45 DoctorDestructo

İlgili konular