Как убрать лишнюю рамку в таблице «страница сломана»? - PullRequest
1 голос
/ 23 марта 2019

У меня длинная многостраничная таблица, которая разбивает страницы между страницами.Таблица имеет границы и границы-коллапс как коллапс.Но на распечатанном предварительном просмотре - есть дополнительная граница.Как я могу удалить это?

Вот рабочий пример 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>

enter image description here

Ответы [ 3 ]

1 голос
/ 23 марта 2019

Вы должны добавить этот стиль, чтобы правильно разрывать страницу:

<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>
1 голос
/ 24 марта 2019

Реальная проблема - 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>
1 голос
/ 23 марта 2019

Проблема в вашем стиле border-collapse: collapse Вместо этого используйте cellspacing="0" cellpadding="0", чтобы ваш стол выглядел как

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

</table>

, также измените стиль некоторых tds, чтобы избежать двойной границы

просмотр https://2ooon0o550.codesandbox.io/

код https://codesandbox.io/embed/2ooon0o550

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...