In tiêu đề bảng trong các trang tiếp theo

Tôi đang cố hiển thị tiêu đề bảng trong các trang tiếp theo khi sử dụng chức năng in của trình duyệt. Sử dụng Firefox Tôi chỉ có thể hiển thị tiêu đề trong trang đầu tiên. Tiêu đề được xác định bằng thẻ. Mã này là như sau:In tiêu đề bảng trong các trang tiếp theo

<html> 
<head> 
    <style type="text/css"> 
     @media print 
     {   
      thead 
      { 
       display: table-header-group;  
      } 
     } 
    </style> 
</head> 
<body>  
    <table> 
     <thead> 
      <tr><td>header1</td></tr> 
      <tr><td>header2</td></tr> 
      <tr><td>header3</td></tr> 
      <tr><td>header4</td></tr> 
      <tr><td>header5</td></tr> 
      <tr><td>header6</td></tr> 
      <tr><td>header7</td></tr> 
      <tr><td>header8</td></tr> 
      <tr><td>header9</td></tr> 
      <tr><td>header10</td></tr> 
      <tr><td>header11</td></tr> 
      <tr><td>header12</td></tr> 
      <tr><td>header13</td></tr>     
     </thead> 
     <tbody> 
      <tr><td> 
      Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> 
      Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> 
      Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> 
      Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> 
      Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>   
      </td></tr> 
     </tbody> 
    <table> 

</body>

Sử dụng xem trước khi in để kiểm tra mô tả của tôi. Nếu bạn xóa dòng mã sau

<tr><td>header13</td></tr>

Tiêu đề xuất hiện trong tất cả các trang như tôi muốn. Làm cách nào để sửa lỗi này? Điều này có vẻ là vấn đề về chiều cao tối đa của tiêu đề bảng.

Nguồn

2011-02-07 JP.

Hãy thử sử dụng <th> thay vì <td> trong tiêu đề bảng của bạn cho ô. Trình duyệt sẽ tự động in các tiêu đề đó trên mỗi trang. Ngoài ra, hãy đảm bảo số lượng ô trong mỗi hàng <tbody> bằng số lượng ô trong tiêu đề.

Nguồn

2011-02-07 18:49:57 julesj

tôi thử những gì bạn nói nhưng không may là không hoạt động. Hãy thử ví dụ của tôi để thấy rằng nó không hoạt động và sau đó loại bỏ dòng "tiêu đề 13". Sau đó, hành vi là mong đợi. Tôi đoán đó là vấn đề của chiều cao tối đa của thẻ thead –

không chắc chắn lý do tại sao bạn có quá nhiều hàng trên thead. Mã dưới đây hoạt động khá tốt (được thử nghiệm trên firefox). Tôi cũng đã thử nghiệm 20 tiêu đề bảng, vẫn hoạt động tốt.

<html> 
<head> 
    <style type="text/css"> 
     @media print { 
      thead 
      { 
       display: table-header-group; 
      } 
     } 
    </style> 
</head> 
<body> 
    <table> 
     <thead> 
      <tr> 
       <th>header1</th> 
       <th>header2</th> 
       <th>header3</th> 
       <th>header4</th> 
       <th>header5</th> 
       <th>header6</th> 
       <th>header7</th> 
       <th>header8</th> 
       <th>header9</th> 
       <th>header10</th> 
       <th>header11</th> 
       <th>header12</th> 
       <th>header13</th> 
      </tr>    
     </thead> 
     <tbody> 
      <tr> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
      </tr> 
      <!-- 
       Code is too long to paste. 
       If you're using emmet/zencoding, try to expand 
       the code below to print 1000 rows 

       (tr>(td{text})*13)*1000 
      --> 
     </tbody> 
    <table> 
</body>

Nguồn

2012-12-26 15:19:20

Đây là 1 hàng vs 13 hàng? –

In tiêu đề bảng trong các trang tiếp theo

Trả lời

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