Question

我有一个长表，多页表，页面之间会中断。该表具有边框和边框折叠作为折叠。但是在可打印预览中-有一些额外的边框。如何删除它？

这里是有效的示例https://codepen.io/anon/pen/MxLjvK

 $('#checker').click(function(){
     if($("#checker").is(":checked")){
            $('#textInput').attr('disabled',true).val("");
     }else{
        $('#textInput').attr('disabled',false);
     }
 });

Answer 1

问题出在您的风格border-collapse: collapse 代替使用 cellspacing="0" cellpadding="0" 所以你的桌子看起来像

<table cellspacing="0" cellpadding="0">
  ---

</table>

还要更改某些tds的样式，以避免出现双重边框

预览 https://2ooon0o550.codesandbox.io/

代码 https://codesandbox.io/embed/2ooon0o550

Answer 2

您必须添加此样式才能正确分页：

<html>
<head>


<style>
    @media print
  

      {
 body {
    padding-bottom: 10mm;
  }
      table {page-break-after:auto;border-collapse: collapse;}
      tr    { page-break-inside:avoid; page-break-after:auto }
      td    { page-break-inside:avoid; page-break-after:auto }
      div   { page-break-inside:avoid; }
      thead { display:table-header-group }
      tfoot { display:table-footer-group }
    }

   </style>
</head>

<body>
   

     <table>
      <tbody>
        <tr >
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
        </tr>
        <tr >
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
        </tr>
		 <tr >
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
        </tr>
		 <tr >
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
        </tr>
		 <tr >
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
        </tr>
		 <tr >
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
        </tr>
		 <tr >
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
        </tr>
		 <tr >
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
        </tr>
		 <tr >
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
        </tr>
		 <tr >
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
          <td class="border" style="border: solid 1px;"><div style="height: 150px;">text</div></td>
        </tr>
		
        <!-- more rows here -->
      </tbody>
    </table>
</body>
</html>

Answer 3

真正的问题是border-collapse: collapse，因此我将其删除并同时移动了所有内联CSS 。我的工作正常，请尝试一下，希望对您有所帮助。谢谢

.print-table {
	border: 0;
}

.print-table tr {
	page-break-inside: avoid;
}                 

.print-table tr td {
	border-style: solid;
}

.print-table tr td + td {
	border-left: 0;
}

.print-table tr td div {
	height: 150px;
}

<table class="print-table" border="1" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td class="border"><div>text</div></td>
      <td class="border"><div>text</div></td>
    </tr>
    <tr>
      <td class="border"><div>text</div></td>
      <td class="border"><div>text</div></td>
    </tr>
    <tr>
      <td class="border"><div>text</div></td>
      <td class="border"><div>text</div></td>
    </tr>
    <tr>
      <td class="border"><div>text</div></td>
      <td class="border"><div>text</div></td>
    </tr>
    <tr>
      <td class="border"><div>text</div></td>
      <td class="border"><div>text</div></td>
    </tr>
    <tr>
      <td class="border"><div>text</div></td>
      <td class="border"><div>text</div></td>
    </tr>
    <tr>
      <td class="border"><div>text</div></td>
      <td class="border"><div>text</div></td>
    </tr>
    <tr>
      <td class="border"><div>text</div></td>
      <td class="border"><div>text</div></td>
    </tr>
  </tbody>
</table>

如何删除“页面已损坏”表上的多余边框？

3 个答案: