I want to print a HTML table with lot of columns and lot of rows. Basically a large table. I'm able to apply page-breaks for the rows correctly. However when it comes to columns it will not fit in same page. I have used table-layout as 'auto', so it will fit around 10-12 columns in a single page. But rest of the columns will not fit and hence it will be cut down. Is there I can make the remaining columns to print in the next page and then page break to print next set of rows.

Current code:

    <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>

this is html.erb file so pls ignore about the variables.

css used:

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