#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; }