Javascript 打印不起作用后增加表格宽度
我知道以前有人问过这样的问题。但我被困住了，什么都试过了。我不知道如何解决这个问题。 问题是：打印的表格格式和详细信息的显示格式宽度较小，并且值显示不正确。请帮忙 查看要打印的页面 单击打印按钮后打印预览 以下是我迄今为止所做的工作： html文件：Javascript 打印不起作用后增加表格宽度,javascript,php,html,css,twitter-bootstrap,Javascript,Php,Html,Css,Twitter Bootstrap,我知道以前有人问过这样的问题。但我被困住了，什么都试过了。我不知道如何解决这个问题。 问题是：打印的表格格式和详细信息的显示格式宽度较小，并且值显示不正确。请帮忙 查看要打印的页面 单击打印按钮后打印预览 以下是我迄今为止所做的工作： html文件： <div class="card-body collapse in"> <div class="card-block big-font" id="print_content">
<div class="card-body collapse in">
<div class="card-block big-font" id="print_content">
<div class="col-md-5">
<div class="panel panel-default">
<div class="panel-heading" style="padding-bottom:15px;padding-top:15px;"><b>Client</b></div>
<div class="panel-body">
<br>
<table class="table">
<tr>
<th>Name</th>
<td id="c_name"></td>
</tr>
<tr>
<th>Address</th>
<td id="c_add"></td>
</tr>
<tr>
<th>Contact No</th>
<td id="c_contact"></td>
</tr>
<tr>
<th>Client GST</th>
<td id="c_gst"></td>
</tr>
<tr>
<th>Pending Amount</th>
<td id="c_pen"></td>
</tr>
<br>
</table>
</div>
</div>
</div>
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-heading" style="padding-bottom:15px;padding-top:15px;"><b>Purchase History</b></div>
<div class="panel-body">
<table class="table" id="p_history" >
</table>
</div>
</div>
</div>
<div class="col-md-12 no-print" style="text-align: center;">
<div id="printbtn" name="printbtn">
</div>
</div>
</div>
</div>
<div class="card-body collapse in">
<div class="card-block big-font" id="print_content">
<div class="col-md-5">
<div class="panel panel-default">
<div class="panel-heading" style="padding-bottom:15px;padding-top:15px;"><b>Client</b>
</div>
<div class="panel-body">
<br>
<br>
<table class="table">
<tbody>
<tr>
<th>Name</th>
<td id="c_name">qqq</td>
</tr>
<tr>
<th>Address</th>
<td id="c_add">Lane B, Koregaon Park</td>
</tr>
<tr>
<th>Contact No</th>
<td id="c_contact">8080808080</td>
</tr>
<tr>
<th>Client GST</th>
<td id="c_gst">27AAVCJ353JE922</td>
</tr>
<tr>
<th>Pending Amount</th>
<td id="c_pen">-</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-heading" style="padding-bottom:15px;padding-top:15px;"><b>Purchase History</b></div>
<div class="panel-body">
<table class="table" id="p_history">
<th>Bill No</th>
<th> SGST</th>
<th> CGST</th>
<th>Total</th>
<th> Pending</th>
<th>Details</th>
<tbody>
<tr>
<td>12357-2018/2019
<div id="div0" class="collapse changethis">
<div class="panel-body" float="right" id="print_content">
<table class="table details" style="margin-right: -390px;margin-top:20px;" id="540">
<tbody>
<tr>
<th class="prodname" colspan="">Product name</th>
<th>HSN Code</th>
<th>Height</th>
<th>Width</th>
<th>Rate</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr>
<td>Vinyl Printing with MS Frame</td>
<td>414243</td>
<td>4 ft</td>
<td>3 ft</td>
<td>20</td>
<td>3</td>
<td>432</td>
</tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
</td>
<td>38.88</td>
<td>8.64</td>
<td>479.52</td>
<td>-</td>
<td><a href="#div0" class="btn btn-info" data-toggle="collapse" vertical-align:="" middle;="">+</a></td>
</tr>
<tr style="display: none;" id="productDetails-productId">
<td colspan="6">
<div id="div0" class="collapse changethis">
<div class="panel-body" float="right" id="print_content">
<table class="table details" style="margin-left: -390px;margin-top:20px;" id="540">
<tbody>
<tr>
<th class="prodname" colspan="2">Product name</th>
<th>HSN Code</th>
<th>Height</th>
<th>Width</th>
<th>Rate</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12 no-print" style="text-align: center;">
<div id="printbtn" name="printbtn">
<br><button type="button" class="btn btn-info" data-toggle="modal" onclick="print_page()">
<i class="icon-print4" style="color:white;"></i> Print History</button>
</div>
</div>
</div>
</div>
我不知道你为什么要把产品的细节放在“账单号”TD中， 更好的方法是将产品详细信息放在下一个div中，例如：
<table class="table">
<thead>
<th>Bill No</th>
<th>SGST</th>
<th>CGST</th>
<th>Total</th>
<th>Pending</th>
<th>Details</th>
</thead>
<tbody>
<tr>
<td>12357-2018/2019</td>
<td>38.88</td>
<td>8.64</td>
<td>479.52</td>
<td>-</td>
<td>+</td>
</tr>
<tr style="display: none;" id="productDetails-productId">
<td colSpan="6">
You can put here details about product (You can put them in a table)
</td>
</tr>
</tbody>
</table>
账单号
SGST
CGST
全部的
悬而未决的
细节
12357-2018/2019
38.88
8.64
479.52
-
+
您可以将产品的详细信息放在这里（您可以将它们放在表格中）
<div class="card-body collapse in">
<div class="card-block big-font" id="print_content">
<div class="col-md-5">
<div class="panel panel-default">
<div class="panel-heading" style="padding-bottom:15px;padding-top:15px;"><b>Client</b></div>
<div class="panel-body">
<br>
<table class="table">
<tr>
<th>Name</th>
<td id="c_name"></td>
</tr>
<tr>
<th>Address</th>
<td id="c_add"></td>
</tr>
<tr>
<th>Contact No</th>
<td id="c_contact"></td>
</tr>
<tr>
<th>Client GST</th>
<td id="c_gst"></td>
</tr>
<tr>
<th>Pending Amount</th>
<td id="c_pen"></td>
</tr>
<br>
</table>
</div>
</div>
</div>
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-heading" style="padding-bottom:15px;padding-top:15px;"><b>Purchase History</b></div>
<div class="panel-body">
<table class="table" id="p_history" >
</table>
</div>
</div>
</div>
<div class="col-md-12 no-print" style="text-align: center;">
<div id="printbtn" name="printbtn">
</div>
</div>
</div>
</div>
<div class="card-body collapse in">
<div class="card-block big-font" id="print_content">
<div class="col-md-5">
<div class="panel panel-default">
<div class="panel-heading" style="padding-bottom:15px;padding-top:15px;"><b>Client</b>
</div>
<div class="panel-body">
<br>
<br>
<table class="table">
<tbody>
<tr>
<th>Name</th>
<td id="c_name">qqq</td>
</tr>
<tr>
<th>Address</th>
<td id="c_add">Lane B, Koregaon Park</td>
</tr>
<tr>
<th>Contact No</th>
<td id="c_contact">8080808080</td>
</tr>
<tr>
<th>Client GST</th>
<td id="c_gst">27AAVCJ353JE922</td>
</tr>
<tr>
<th>Pending Amount</th>
<td id="c_pen">-</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-heading" style="padding-bottom:15px;padding-top:15px;"><b>Purchase History</b></div>
<div class="panel-body">
<table class="table" id="p_history">
<th>Bill No</th>
<th> SGST</th>
<th> CGST</th>
<th>Total</th>
<th> Pending</th>
<th>Details</th>
<tbody>
<tr>
<td>12357-2018/2019
<div id="div0" class="collapse changethis">
<div class="panel-body" float="right" id="print_content">
<table class="table details" style="margin-right: -390px;margin-top:20px;" id="540">
<tbody>
<tr>
<th class="prodname" colspan="">Product name</th>
<th>HSN Code</th>
<th>Height</th>
<th>Width</th>
<th>Rate</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr>
<td>Vinyl Printing with MS Frame</td>
<td>414243</td>
<td>4 ft</td>
<td>3 ft</td>
<td>20</td>
<td>3</td>
<td>432</td>
</tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
</td>
<td>38.88</td>
<td>8.64</td>
<td>479.52</td>
<td>-</td>
<td><a href="#div0" class="btn btn-info" data-toggle="collapse" vertical-align:="" middle;="">+</a></td>
</tr>
<tr style="display: none;" id="productDetails-productId">
<td colspan="6">
<div id="div0" class="collapse changethis">
<div class="panel-body" float="right" id="print_content">
<table class="table details" style="margin-left: -390px;margin-top:20px;" id="540">
<tbody>
<tr>
<th class="prodname" colspan="2">Product name</th>
<th>HSN Code</th>
<th>Height</th>
<th>Width</th>
<th>Rate</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12 no-print" style="text-align: center;">
<div id="printbtn" name="printbtn">
<br><button type="button" class="btn btn-info" data-toggle="modal" onclick="print_page()">
<i class="icon-print4" style="color:white;"></i> Print History</button>
</div>
</div>
</div>
</div>
客户
名称
qqq
地址
高丽岗公园B巷
联系电话
8080808080
客户商品及服务税
27AAVCJ353JE922
未决金额
-
购买历史记录
账单号
SGST
CGST
全部的
悬而未决的
细节
12357-2018/2019
产品名称
HSN码
高度
宽度
比率
量
数量
MS框乙烯基印花
414243
4英尺
3英尺
20
3.
432
38.88
8.64
479.52
-
产品名称
HSN码
高度
宽度
比率
量
数量
印刷历史
@Mohammed Cherkaoui：这是inspect元素代码，在按照您的建议进行更改后。它与javascript无关，您只需支持将其应用于js。尝试了您的方法，但问题仍然存在。打印看起来仍然一样。在浏览器中打开页面，检查元素，复制并生成表格的html内容，然后将其添加到问题中。