Fit a html table in A4 size

Question

I have a html file with a wide table. I want to be able to put it in a A4 size. The columns that exceed the A4 size should come below in a new table.

I tried using this the @page attribute, but it didn't change anything,

<style type="text/css">
    @page {    size: 21cm 29.7cm; margin: 30mm 45mm 30mm 45mm; }
</style>

Is there any third party js library that automatically does this? (The table size is not known before hand, the user uploads data and generates the table, so the number of columns is not fixed). {My end goal is to print this as a pdf, but I could not achieve this using the qprinter given in QT}

I have put a html file with long table here - link.

Thanks in advance

Answer 1

Table could not break its columns in a new row, all you can do is to make table width according to the paper width.

A4 page width in px is 2480 pixels x 3508 pixels.

so you will make max-width of table to 2480px so that it could not exceed the size of paper.

Let's guess your table id="table", then your style should be.

<style>
  #table{
    max-width: 2480px;
    width:100%;
  }
  #table td{
    width: auto;
    overflow: hidden;
    word-wrap: break-word;
  }
</style>