Window.print() 函数搞乱了 table

Question

所以我写了一个页面，其中有这个简单的 table，您可以填写并打印出来。现在 table 打印后应该是这样的：

但是，在我点击打印后，它给了我以下信息：

如您所见，对象的输入字段乱七八糟，table 不再具有其原始宽度。任何人都知道我怎么可能解决这个问题？这是我的代码：

<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;
}

Answer 1

可能会从脚本标签中添加一些CSS，这些标签不会被格式化以供打印

Answer 2

您需要设置您的CSS。请将以下代码添加到您的 CSS 并尝试。

.table-wrapper2{
    width: 142%;
    }

Window.print() 函数搞乱了 table

Window.print() function messes up the table

html

javascript

css

jquery

web-technologies