删除tfoot和thread内的表边框

I would like to remove border inside the tfoot and thead area when printing. When the table's row were breaked into new page, the border continues to show even inside the tfoot and also thead area. This is the screenshot of the issue:

My Code :

@media print {
  .report-container {
    page-break-after: always;
  }
  thead.report-header {
    display: table-header-group;
  }
  tfoot.report-footer {
    display: table-footer-group;
    border: none;
  }
  #spacer {
    height: 230px;
  }
  #footer {
    position: fixed;
    bottom: 0;
    border: none;
  }
}

<table class="report-container" width="100%" style="" cellspacing="1" cellpadding="5">
  <thead class="report-header">
    <tr>
      <td width="" align="left">
        <?php if ($so_invoice_report_row['has_header_footer']) { echo html_entity_decode($rowHeaderFooter['header_content']); } else {} ?>
      </td>
    </tr>
  </thead>
  <tfoot class="report-footer">
    <tr>
      <td width="" align="left" id="spacer"></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>
        <?php
          //include 'table_content.php';
        ?>
        <table border=1 style="border-collapse: collapse;">
        <?php
        for($i=0; $i<=100;$i++) {
            echo '<tr><td>';
            echo "Column " . $i . '</td><td> Column2 ';
            echo '</td></tr>';
        }
        ?>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<div id="footer">
  <?php if ($so_invoice_report_row['has_header_footer']) { echo html_entity_decode($rowHeaderFooter['footer_content']); } else {} ?>
</div>

</div>

Removed position: fixed; bottom: 0; from #footer in your CSS style sheet as below and apply a height value for your footer.

@media print {
  .report-container {
    page-break-after: always;
  }
  thead.report-header {
    display: table-header-group;
    background-color:red;
  }
  tfoot.report-footer {
    display: table-footer-group;
    border: none;
    background-color:green;
  }
  tbody {
    background-color:blue;
  }
  #spacer {
    margin-bottom: 150px;
  }
  #footer {
    border: none;
  }
} 




<table class="report-container" width="100%" style="" cellspacing="1" cellpadding="5">
  <thead class="report-header">
    <tr>
      <th width="" align="left">
        <?php if ($so_invoice_report_row['has_header_footer']) { echo html_entity_decode($rowHeaderFooter['header_content']); } else {} ?>
      </th>
    </tr>
  </thead>
  <tfoot class="report-footer" id="spacer">
    <tr>
      <td><?php if ($so_invoice_report_row['has_header_footer']) { echo html_entity_decode($rowHeaderFooter['footer_content']); } else {} ?>
      </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td><?php
          include 'table_content.php';
        ?>
      </td>
    </tr>
  </tbody>
</table>

This will work for you. Try it. Let me know if any problem is raised.

I can't really reproduce your result... Could you please post a bit of generated html that shows the problem (I mean, actually containing table data instead of -stuff).

BUT if I get you right, you're trying to keep the marked space free for the corporate header and footer already contained on the paper you're using. In that case, I have a workaround for you

1. Add white (meaning: background: white;) divs the desired size with fixed position and a higher z-index at the top and the bottom of your html page containing your additional header data *

2. Add blank divs with relative positioning and the size of your header/footer before and after your html page content, so the whole content won't "go under" the other header/footer elements (I thought using padding should also work but here it didn't)

3. Leave the thead and tfooter empty - just size it so it won't "go under" the other header/footer elements

Test it.

*) Note: apparently (at least on Opera 54.0) a white background colour is never ignored, but if your header/footer seems to be transparent instead of white when printing, look for the option to "print background images"