在隨後的頁面上打印帶有自定義標題的html表格

當存在帶表格的html並且想要打印它時，表格可能會或可能不會分割，具體取決於表格的長度。如果拆分有一種方法重複的表頭，要做到這一點，你可以添加：在隨後的頁面上打印帶有自定義標題的html表格

thead { 
    display: header-table-group; 
}

我想要做的就是跳過第一頁，這樣的標題將只顯示在後續的網頁。

有沒有辦法做到這一點？

來源

2012-09-10 Hassek

Thead：First-child work？或者表格實際上是在標籤上分割的（即

.....

....） – Lowkase

我不知道它是如何分裂的，因爲這是瀏覽器所做的事情，它不允許我檢查。我會試一試，並回復 – Hassek

可悲的是它不起作用，但是是一個合理的方法。謝謝 – Hassek

回答

如果你的<thead>有一個固定的高度，那麼它很容易隱藏在第一頁上。您只需將表格嵌入div與overflow: hidden;，然後向表中添加負頂部邊距以隱藏其標題。

實施例：

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

注意，報頭將僅在隨後的頁面顯示在支持重複表頭，其不包括鉻，Safari或Opera瀏覽器。

來源

2014-09-10 22:21:45 DoctorDestructo

相關問題