html - 如何删除“页面损坏”表上的额外边框？

Question

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

这是工作示例https://codepen.io/anon/pen/MxLjvK

<table style="border-collapse: collapse;">
  <tbody>
    <tr style="page-break-inside: avoid;">
      <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 style="page-break-inside: avoid;">
      <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>

标签： htmlcss

Answer 1

真正的问题是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>