In bảng html với tiêu đề tùy chỉnh trên các trang tiếp theo

Khi có html với bảng và bạn muốn in nó, bảng có thể hoặc không thể phân chia tùy thuộc vào thời gian của bảng. Nếu nó chia tách có một cách để lặp lại tiêu đề của bảng, để làm điều đó bạn có thể thêm:In bảng html với tiêu đề tùy chỉnh trên các trang tiếp theo

thead { 
    display: header-table-group; 
}

Những gì tôi muốn làm là để bỏ qua trang đầu tiên, vì vậy tiêu đề sẽ chỉ hiển thị trên các trang tiếp theo .

Có cách nào để thực hiện việc này không?

Nguồn

2012-09-10 Hassek

Thead: công việc con đầu lòng? Hoặc bảng có thực sự phân tách trên các thẻ không (ví dụ:

.....

....) – Lowkase

Tôi không có ý tưởng về cách nó chia tách vì đó là thứ mà trình duyệt thực hiện và nó không cho phép tôi kiểm tra. Tôi sẽ thử và trả lời – Hassek

thật đáng buồn là nó không hoạt động nhưng là một cách tiếp cận hợp lý. Cảm ơn – Hassek

Trả lời

Nếu <thead> của bạn có chiều cao cố định, sau đó rất dễ dàng để ẩn nó trên trang đầu tiên. Tất cả những gì bạn phải làm là lồng bảng trong một div với overflow: hidden;, và sau đó thêm một lề trên tiêu cực vào bảng để ẩn tiêu đề của nó.

Ví dụ:

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

Lưu ý rằng tiêu đề sẽ chỉ hiển thị trên các trang tiếp theo trong các trình duyệt hỗ trợ lặp lại tiêu đề bảng, trong đó không bao gồm Chrome, Safari hoặc Opera.

Nguồn

2014-09-10 22:21:45 DoctorDestructo

Các vấn đề liên quan