как разбить столбцы на следующую страницу в html-печати

#javascript #html #css #printing #erb

#язык JavaScript #HTML #CSS #печатание #erb

Вопрос:

Я хочу распечатать HTML-таблицу с большим количеством столбцов и большим количеством строк. В основном большой стол. Я могу правильно применять разрывы страниц для строк. Однако, когда дело доходит до столбцов, они не будут помещаться на одной странице. Я использовал макет таблицы как «автоматический», поэтому он поместится примерно в 10-12 столбцов на одной странице. Но остальные колонны не поместятся, и, следовательно, она будет урезана. Есть ли возможность сделать так, чтобы оставшиеся столбцы печатались на следующей странице, а затем на разрыв страницы для печати следующего набора строк.

Текущий код:

   lt;div id="pdf-export-grid" class="div-table"gt;  lt;div class="row"gt;  lt;% @column_values.each do |cell| %gt;  lt;div class="column column-border grid-cell-width lt;%= @add_class %gt;" style="lt;%= cell["inline_styles"] %gt;" gt;  lt;% if (cell["value"].present? amp;amp; !cell["value"].nil?) %gt;  lt;%= cell["value"] %gt;  lt;% else %gt;  lt;br/gt;  lt;% end %gt;  lt;/divgt;  lt;% end %gt;  lt;/divgt;   lt;/divgt;   

это файл html.erb, поэтому, пожалуйста, не обращайте внимания на переменные.

используемый css:

 .div-table {  display: table;   background-color: #eee;   table-layout: fixed;  border-collapse: collapse;  width: 100%;  break-inside: avoid;  }  .column {  padding: 4px;  display: table-cell;  break-inside: avoid;  }  .column-border {  border-style: solid;  border-width: thin;  border-color: #D3D3D3;  }  .column-header-border {  border-top: solid;  }  .row {  display: table-row;  clear: both;  page-break-inside: avoid;  }  .column:nth-child(odd), .grid-cell-width:nth-child(odd) {  width: 15%;  background: #ddd;  }  .column:nth-child(even) {  width: 75%;  background: #ddd;  }  .column-border:last-child {  border-right: solid;  border-width: thin;  border-color: #D3D3D3;  }  .grid-cell-width:nth-child(even) {  width: 15%;  background: #ddd;  }