I'm trying to export a web page containing many tables as a .pdf file. I figured out triggering the default print function using javascript might do the trick.

the site is quite long and depeding on the loaded data might be shorter or even longer.

The site looks something like this (example, the pink like indicates the printable area when pressing Strg+P, result here.)

The main issue here is, that the text gets kind of squished together (?) and get's cut off.

here's the code I'm trying to work on:

javascript itself is triggering the default print function

<script>
  $("#employeePrintPage").click(function () {
    window.print();
  });
</script>

css is hiding everything I don't need (eg. logo and navigation bar) as well as trying to get page-break to work.

 @media print {
    #loadcontainer {
        background-color: white;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 15px;
        font-size: 14px;
        line-height: 18px;
    }

    .navbar, nav, .navbar-menu-wrapper, .navbar-nav-right, .hideprint { display: none !important; }


    table { page-break-after:always !important }
    tr    { page-break-inside:avoid !important; page-break-after:auto !important }
    td    { page-break-inside:avoid !important; page-break-after:auto !important }
    thead { display:table-header-group !important }
    tfoot { display:table-footer-group !important }

  }

i tried to use a couple of jquery plugins but none of them worked with input fields.

I am unable to open a new window because input fields don't adopt values.