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

If you are having a table and using 100% width, then I believe, it will print 100% width corresponding to the media you have selected provided the table is also having a parent with 100% width. — Nitesh, Apr 07 '16 at 11:40
@NathanL, the table might be very wide (might contain 100s of columns), so I do not want to necessarily 'fit' the table (since this causes the size very small). Suppose I have 100 columns and A4 size dictates not more than 7 columns, ideally my html should now have first 7 columns, then below that, another 7 columns, and so on.... — clearScreen, Apr 07 '16 at 11:45
If you have 7 cols that fit in A4 and you have 20 cols for instance, all 20 cols will be in the table, so the question of having the 8th col to be started on a new page, which I feel, would not be possible, because the table is already having 20 cols unless new tables with new cols are created. — Nitesh, Apr 07 '16 at 11:48
Yes, I am currently facing that problem. Is there any plugin/library that does the above automatically? [convert a wide table into many shorter tables] — clearScreen, Apr 07 '16 at 12:04
I would suggest you to make them as `divs` if it is not a big re-work. As they "may" work like you want. — Nitesh, Apr 07 '16 at 12:10
+1 for divs. Trying to do this with tables could present a bunch of problems. What if the data is 100 columns wide and 5 pages tall? That print would be a mess. Perhaps rethink the printed material, showing an entire row in a reformatted structure for printing allowing all of the information to fit onto a single block within a page. Something like http://johnpolacek.github.io/stacktable.js/ may give you some ideas. — Brad Miller, Apr 14 '16 at 16:22
http://stackoverflow.com/questions/11250501/wrap-long-html-tables-to-next-line — Arleigh Hix, Apr 14 '16 at 18:30

score 7 · Answer 1 · answered Apr 19 '16 at 22:35

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>

score 4 · Answer 2 · edited May 23 '17 at 12:08

You should try to use divs rather than tables if you want to get good printable sheets. With <div> we have better control of the way its displayed. <div> can easily be styled unlike <table>,<tr>,<td>, etc.

Here is something I did :

CSS

@media print {
    @page {
      margin: 0;
    }
    body {
        height: 100%;
        width: 100%;
    }
    div.divTableRow > div {
      display: inline-block;  
      border: solid 1px #ccc;
      margin: 0.1cm;
      font-size: 1rem;
    }
    div.divTableRow {
      display: block;
      margin: solid 2px black;
      margin: 0.2cm 1cm;
      font-size: 0;
      white-space: nowrap;
    }
    .divTable {
        transform: translate(8.5in, -100%) rotate(90deg);
        transform-origin: bottom left;
        display: block;
    }
}


.divTable {
  display: table;
  width: 100%;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
  width:100px; // set to a fixed value so as to get the table in the ordered manner.
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}

.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}

.divTableBody {
  display: table-row-group;
}

You may customize the same as necessary.

Fiddle : div-table-printable

You may convert your html with <table> to <div> using table-to-divs

Other references:

printing-html-table

CSS2PDF

Can you suggest how a div would work for table cells with rowspan or colspan more than 1? On divtable it keeps a column header empty when converted to div — SajanGohil, Jan 22 '22 at 07:56

Arleigh Hix · Answer 3 · 2016-04-15T10:56:33.370

This appears to do what you want, if that is to place the printed pages side-by-side and read the entire table as it is on screen. It worked with the html you provided in your link, add this to your stylesheet (I only tested in Chrome)

  @media print{  
   @page {size:landscape;}
   html{
    -ms-transform: rotate(90deg);/* IE 9 */
    -webkit-transform: rotate(90deg);/* Chrome, Safari, Opera */
    transform: rotate(90deg);
   }

   table,h1,h2 {position:relative;left:4.5cm}
  }

The key is rotating the content for print so it overflows "down" to the next page, then set size to landscape to rotate the paper, so you end up with left to right portrait oriented pages. Unfortunately I could not get the page to break between columns. But if you are posting all the printed pages up on a wall side-by-side it will be readable. The print preview will show all the pages turned 90 degrees, that's what you want, then select A4 as the paper size in the print dialog. I had to reposition the table and your headings because it was hanging off the left side of the first page, maybe because of all the nested divs with in-line styles?, I do not know, like I said this worked with your html.

Here is the printed as pdf file (I repeated your first row a couple more times in this example) https://www.dropbox.com/s/fjyns5gaa4jiky4/wide-table%20printed.pdf?dl=0

Fit a html table in A4 size

3 Answers3