javascripthtmljquerycss

Window.print() function messes up the table

So i wrote a page where you have this simple table, that you can fill in and print it. Now the table should look like this after printing:

Table should look like this

but instead, after i hit printing it gives me the following: Table shoudlnt look like this

As you can see, the input fields for the Objects are messed up and the table doesnt have its original width anymore. Anyone have any idea how i could possibly solve this? Here is my code: 

<html>


                <head>
                    <title>TestTable</title>
                    <script src="TestTable.js"></script>
                    <link rel="stylesheet" href="GeneralStyle.css">
                    <link rel="stylesheet" href="TestTable.css">
                    <meta charset="utf-8" /> 
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
                    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
                    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
                    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

                </head>


                <body>

                    <div id="main4" class="main">
            <h1 id="x4" class="x">X</h1>
            <h1 id="T4" class="title">Accessories</h1>
            <div class = "table-wrapper2">
            <table id="table_041" style="margin-left: 1%">
                <tr>
                    <th colspan="5"><b>Accessories </b></th>
                </tr>
                <tr>
                    <td></td>
                    <td><b>to Object 1</b></td>
                    <td><b>to Object 2</b></td>
                    <td><b>to Object 3</b></td>
                    <td><b>to Object 4</b></td>
                </tr>
                <tr>
                    <td><b>Addition Number 1(Amount | Serial Number)</b></td>
                    <td><input style="width: 45px; float: left; margin-right: 5px" class = "in4 in3text" id="b5" type="number"></input><p style="margin-top: 0; margin-bottom: 0" id="mf1"><input id="mff1" class="in3text" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" class = "in4 in3text" id="b6" type="number"></input><p style="margin-top: 0; margin-bottom: 0" id="mf2"><input id="mff2" class="in3text" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" class = "in4 in3text" id="b7" type="number"></input><p style="margin-top: 0; margin-bottom: 0" id="mf3"><input id="mff3" class="in3text" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" class = "in4 in3text" id="b8" type="number"></input><p style="margin-top: 0; margin-bottom: 0" id="mf4"><input id="mff4" class="in3text" style="width: 95px; float: right" type="text"></input></p>
                </tr>
                <tr>
                    <td><b>Addition Number 2(Amount | Serial Number)</b></td>
                    <td><input style="width: 45px; float: left; margin-right: 5px" class = "in4 in3text" id="b9" type="number"></input><p style="margin-top: 0; margin-bottom: 0" id="bp1"><input id="bpp1" class="in3text" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" class = "in4 in3text" id="b10" type="number"></input><p style="margin-top: 0; margin-bottom: 0" id="bp2"><input id="bpp2" class="in3text" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" class = "in4 in3text" id="b11" type="number"></input><p style="margin-top: 0; margin-bottom: 0" id="bp3"><input id="bpp3" class="in3text" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" class = "in4 in3text" id="b12" type="number"></input><p style="margin-top: 0; margin-bottom: 0" id="bp4"><input id="bpp4" class="in3text" style="width: 95px; float: right" type="text"></input></p>
                </tr>
                <tr>
                    <td><b>Addition Number 3(Amount | Serial Number)</b></td>
                    <td><input style="width: 45px; float: left; margin-right: 5px" class = "in4 in3text" id="b13" type="number"></input><p style="margin-top: 0; margin-bottom: 0" id="mfsu1"><input id="mfsuu1" class="in3text" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" class = "in4 in3text" id="b14" type="number"></input><p style="margin-top: 0; margin-bottom: 0" id="mfsu2"><input id="mfsuu2" class="in3text" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" class = "in4 in3text" id="b15" type="number"></input><p style="margin-top: 0; margin-bottom: 0" id="mfsu3"><input id="mfsuu3" class="in3text" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" class = "in4 in3text" id="b16" type="number"></input><p style="margin-top: 0; margin-bottom: 0" id="mfsu4"><input id="mfsuu4" class="in3text" style="width: 95px; float: right" type="text"></input></p>
                </tr>
                <tr>
                    <th colspan="5"><b>additional others (please fill in):</b></th>
                </tr>
                <tr>
                    <td><b>Optional Addition Number 4(Amount | Serial Number)</b></td>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b1" class = "in3text" type="number"></input><p style="margin-top: 0; margin-bottom: 0"><input class="in3text" id="bb1" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b2" class = "in3text" type="number"></input><p style="margin-top: 0; margin-bottom: 0"><input class="in3text" id="bb2" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b3" class = "in3text" type="number"></input><p style="margin-top: 0; margin-bottom: 0"><input class="in3text" id="bb3" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b4" class = "in3text" type="number"></input><p style="margin-top: 0; margin-bottom: 0"><input class="in3text" id="bb4" style="width: 95px; float: right" type="text"></input></p>
                </tr>
                <tr>
                    <td><b>Optional Addition Number 5(Amount | Serial Number)</b></td>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b17" class = "in3text" type="number"></input><p style="margin-top: 0; margin-bottom: 0"><input class="in3text" id="bb17" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b18" class = "in3text" type="number"></input><p style="margin-top: 0; margin-bottom: 0"><input class="in3text" id="bb18" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b19" class = "in3text" type="number"></input><p style="margin-top: 0; margin-bottom: 0"><input class="in3text" id="bb19" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b20" class = "in3text" type="number"></input><p style="margin-top: 0; margin-bottom: 0"><input class="in3text" id="bb20" style="width: 95px; float: right" type="text"></input></p>
                </tr>
                <tr>
                    <td><input class = "in4 in3text" id="b21" type="text"></input>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b22" class = "sp1_A in3text" type="number"></input><p class="sp1" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp1" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b23" class = "sp2_A in3text" type="number"></input><p class="sp2" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp2" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b24" class = "sp3_A in3text" type="number"></input><p class="sp3" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp3" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b25" class = "sp4_A in3text" type="number"></input><p class="sp4" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp4" style="width: 95px; float: right" type="text"></input></p>
                </tr>
                <tr>
                    <td><input class = "in4 in3text" id="b26" type="text"></input>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b27" class = "sp1_A in3text" type="number"></input><p class="sp1" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp1" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b28" class = "sp2_A in3text" type="number"></input><p class="sp2" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp2" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b29" class = "sp3_A in3text" type="number"></input><p class="sp3" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp3" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b30" class = "sp4_A in3text" type="number"></input><p class="sp4" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp4" style="width: 95px; float: right" type="text"></input></p>
                </tr>
                <tr>
                    <td><input class = "in4 in3text" id="b31" type="text"></input>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b32" class = "sp1_A in3text" type="number"></input><p class="sp1" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp1" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b33" class = "sp2_A in3text" type="number"></input><p class="sp2" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp2" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b34" class = "sp3_A in3text" type="number"></input><p class="sp3" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp3" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b35" class = "sp4_A in3text" type="number"></input><p class="sp4" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp4" style="width: 95px; float: right" type="text"></input></p>
                </tr>
                <tr>
                    <td><input class = "in4 in3text" id="b36" type="text"></input>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b37" class = "sp1_A in3text" type="number"></input><p class="sp1" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp1" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b38" class = "sp2_A in3text" type="number"></input><p class="sp2" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp2" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b39" class = "sp3_A in3text" type="number"></input><p class="sp3" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp3" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b40" class = "sp4_A in3text" type="number"></input><p class="sp4" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp4" style="width: 95px; float: right" type="text"></input></p>
                </tr>
                <tr>
                    <td><input class = "in4 in3text" id="b41" type="text"></input>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b42" class = "sp1_A in3text" type="number"></input><p class="sp1" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp1" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b43" class = "sp2_A in3text" type="number"></input><p class="sp2" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp2" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b44" class = "sp3_A in3text" type="number"></input><p class="sp3" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp3" style="width: 95px; float: right" type="text"></input></p>
                    <td><input style="width: 45px; float: left; margin-right: 5px" id="b45" class = "sp4_A in3text" type="number"></input><p class="sp4" style="margin-top: 0; margin-bottom: 0"><input class="in3text spp4" style="width: 95px; float: right" type="text"></input></p>
                </tr>
            </table>

            <br><br>
            <button id="print" class="next Button">Print Table</button>
            </div>
        </div>


                <script>
                $("#print").click(function(){

                window.print();

                })

                </script>


                </body>





</html>

table {
    width: 80%;
    border-collapse: collapse;
    color: gray;
    margin-left: 5%;
}
th, td {
    border: 1px solid #ddd;
    opacity:0.9;
    text-align: center;
    padding: 5px;
}



th {
    background-color: white;
}
table tr:nth-child(even), #content tr:nth-child(even) select{background-color: #f2f2f2; width:100%; height:100%; font-family: Calibri;}
table tr input, #content td select{width:100%; height:100%; border: 0px; font-family: Calibri;}
#content tr:nth-child(even) input{background-color: #f2f2f2 ; width:50%; border-style:inset;}

/*This one sorgt dafür,dass beim printen die einzelnen divs nicht über zwei seiten aufgeteilt werden*/
@media print  
{
    div{
        page-break-inside: avoid;
    }
}

@page { size: landscape; }


.main {
    float: left;
    width: 85%;
    margin-top: 1%;
    border-radius: 5px;
    background-color: #ffffff;
    margin-left: 1%;
}




.in3{

    text-align:center;

}

.in3text
{
    text-align: right;
    width: 50%;
    background-color:#f2f2f2; 
    border-style:inset;
    border-width:1px;
}




#profit, .title {
    color: gray;
    padding-left: 2%;
}
.x {
    color: gray;
    float: right;
    margin-right: 3%;
}
.x, .title:hover {
    cursor: pointer;
}
form  {
    margin:0;
}


.c {
    float: right;
}


.tablewrapper2
{
    overflow-x: auto;
}

.butn {
    font-family: Arial;
    color: #ffffff;
    font-size: 16px;
    font-family: "Calibri";
    background: #1d748a;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    border: none;
}
.butn:hover {
    background: #1d5e8a;
    text-decoration: none;
}
Solution

  • You need to set your CSS. Please add below code to your CSS and try.

    .table-wrapper2{
    width: 142%;
    }