Javascript 函数的作用是：将表格弄乱
所以我写了一个页面，其中有一个简单的表格，可以填写和打印。现在，打印后的表格应如下所示： 但是，在我点击“打印”后，它会给我以下信息： 如您所见，对象的输入字段被弄乱，表格不再具有其原始宽度。有人知道我怎么解决这个问题吗？ 这是我的密码：Javascript 函数的作用是：将表格弄乱,javascript,jquery,html,css,web-technologies,Javascript,Jquery,Html,Css,Web Technologies,所以我写了一个页面，其中有一个简单的表格，可以填写和打印。现在，打印后的表格应如下所示： 但是，在我点击“打印”后，它会给我以下信息： 如您所见，对象的输入字段被弄乱，表格不再具有其原始宽度。有人知道我怎么解决这个问题吗？ 这是我的密码： <html> <head> <title>TestTable</title> <scr
<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>
可能会从脚本标签中添加一些CSS，这些CSS不会被格式化以进行打印您需要设置CSS。请将以下代码添加到您的CSS中，然后重试
.table-wrapper2{
width: 142%;
}
那么，为什么你只做宽度：85%，这会导致包裹？@epascarello你是说.main中的那个？我现在将其更正为宽度：100%，但打印后仍会进行包装：（在没有所有库css（jquery ui等）的情况下尝试此操作）。这将有助于缩小原因。太好了！非常感谢您这么做。我通过重写单击“打印”时发生的代码来解决此问题。因此，现在它使表格更大以便打印，然后返回到正常宽度。下面是代码：
$（“#打印”）。单击（函数（）{//使它们更大以便打印$（“.table-wrapper2”）.css（“宽度”，“142%”）；window.print（）；//将它们返回到正常状态$（“.table-wrapper2”）.css（“宽度”，“100%”）；}）.table-wrapper2{
width: 142%;
}