window.print() set a table fit in page

Question

This is how it looks my HTML:

In order to print the page I am using in JavaScript the window.print() function.

$scope.print= function() {
    $("#tab2-panel-tools").hide();
    $("#title-row").hide();
    window.print();
    $("#tab2-panel-tools").show();
    $("#title-row").show();
}

In the next image is my print preview. In the print preview the table exceed the width of the page. How can I fit the table in the page?

Change the `scale` in settings (click `more settings` on the left) to print it smaller. Would be better in `landscape` -- change it in settings too. — ild flue, Jan 26 '18 at 13:36

score 4 · Answer 1 · answered Jan 26 '18 at 13:38

4

You can solve it with css, to set a new style for your printed versions, use media print

@media print {
  table{
    font-size: 10px;//customize your table so they can fit
  }
}

answered Jan 26 '18 at 13:38

Renzo Calla

7,486
2
22
37

my table can has different number of columns and rows. Can i set the table to fit in page according to number of columns? ... for example there are situation when i have 10 columns, then i can set bigger font-size... also there are situations when i have 20 columns then i need to set smaller font-size... this is my big problem – Wekerle Tibor Jan 30 '18 at 07:56
1

I would recommend to open a new question for this but basically you can play with JavaScript to detect the number of columns and add an specific class or you can try with pure css as it is explained here : https://stackoverflow.com/a/12198561/2894798 – Renzo Calla Jan 30 '18 at 12:11

score 0 · Answer 2 · answered Jan 30 '18 at 10:10

I found a solution, using javascript, here is my code:

    $scope.print= function() {
    var nrColumns = $("#reportPrintPreviewTableBody tr:first td").length;
    //here I can put as many "if"-s as I need
    if (nrColumns >= 14) {
        $("#reportPrintPreviewTable").css("font-size", "10px");
    }else if (nrColumns >= 10) {
        $("#reportPrintPreviewTable").css("font-size", "14px");
    }

    //$("#reportPrintPreviewTable").css("height", "100%");
    $("#tab2-panel-tools").hide();
    $("#title-row").hide();
    window.print();
    $("#reportPrintPreviewTable").css("font-size", "11px");
    $("#tab2-panel-tools").show();
    $("#title-row").show();
}

window.print() set a table fit in page

2 Answers2