Quiero imprimir una tabla HTML con muchas columnas y muchas filas. Básicamente una mesa grande. Puedo aplicar saltos de página para las filas correctamente. Sin embargo, cuando se trata de columnas, no cabe en la misma página. He usado el diseño de la tabla como 'automático', por lo que cabe alrededor de 10-12 columnas en una sola página. Pero el resto de las columnas no encajarán y, por lo tanto, se cortarán. ¿Puedo hacer que las columnas restantes se impriman en la página siguiente y luego el salto de página para imprimir el siguiente conjunto de filas?

Código actual:

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

este es el archivo html.erb, así que ignore las variables.

css usado:

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