所以我写了一个页面，您有一个简单的表格，您可以填写并打印它。现在，该表在打印后应如下所示：
但是相反，在我点击打印后，它给了我以下信息：
如您所见，对象的输入字段被弄乱了，表格不再具有其原始宽度。有人知道我怎么可能解决这个问题吗？
这是我的代码：
<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;
}
最佳答案
您需要设置CSS。请在您的CSS中添加以下代码并尝试。
.table-wrapper2{
width: 142%;
}