table heading repeat while printing

问题

I have used table for display the list of records. It have lot of rows and columns. If I print this table the table heading display in first page. After the first page the headings are not display. I found many website from Google search. I have followed that method, but I could not achieve. I could not realize the mistake. This is my css.

<style type="text/css" media="print" >
table td {
    border-bottom:1px solid gray;
}
th {
font-family:Arial;
color:black;
background-color:lightgrey;
}
thead {
    display:table-header-group;
}
tbody {
    display:table-row-group;
}
</style>

This my Html code:

<table border="0" cellpadding="2" cellspacing="0">
    <thead>
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>First Name 1</td>
            <td>Last Name 1</td>
        </tr>
    </tbody>
</table>

Anyone can help me? Thanks.

回答1:

Try adding this in your CSS :

  @media print
 {
   thead {display: table-header-group;}
 }

回答2:

Here is the sample First, you have to explicitly define the table head and table body:

   <table>
   <thead>
  <tr>
     <th>First Heading</th>
     <th>Second Heading</th>
     <th>Third Heading</th>
  </tr>
 </thead>
 <tbody>
  <tr>
     <td>foo</td>
     <td>bar</td>
     <td>baz</td>
  </tr>

    . . .

  <tr>
     <td>fim</td>
     <td>fam</td>
     <td>fom</td>
  </tr>
</tbody>
</table>

If you want printing to work, you need to have an explicit declaration. Next, you just need a single line of CSS to get things going:

              @media print {
thead {display: table-header-group;}
}

This will force most browsers to repeat the contents of thead node on every printed page.

来源：https://stackoverflow.com/questions/12434790/table-heading-repeat-while-printing

标签

html5

css3

printing