在打印预览中，我试图让所有标题列在一行中对齐...... 但一些标题需要另一行，因为列中的字母更多...... 如何使列的所有标题在一行中对齐...... 我调整了媒体 css 中的每一列宽度....但该列仍然没有扩展到一行 在下面提供我的代码......
http://jsfiddle.net/e5JEH/embedded/result/
@media print {
body {margin:0; padding:0; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 12px Arial, Helvetica,"Lucida Grande", serif; color: #000;}
.mainDiv {
display: none;
}
#soLeft{
width: 300px;
/*border: 1px solid red; */
background-color: green;
}
#billLabelLeft{ /*border: 1px solid red;*/ font-size: 12px; width: 50px;}
#billTextSO{ width: 221px; /*border: 1px solid red;*/}
.form-horizontal .controls {
margin-left: 5px;
}
.form-horizontal .control-label {
text-align: left;
width: 50px;
}
#attentionTextSo{ width: 221px; }
#addressTextSo{ width: 221px; }
#cityTextSo{width: 70px; margin-left: 25px; height: 13px; }
#stateLabelLeftSo{display: inline-block; margin-left: 4px;/* border: 1px solid red;*/ background-color: green; -webkit-print-color-adjust: exact; }
#stateTextSo{width: 20px; height: 13px;}
#zipLabelLeftSo{display: inline-block; margin-left: 1px;}
#zipTextSo{width: 25px; height: 13px;}
#countryTextSo{width: 90px; margin-left: 5px; height: 13px;}
#phoneTextSo{width: 70px; height: 13px;}
#emailTextSo{width: 50px;}
#userListSO{margin-left: 20px;color: white; display: inline-block; background-color: #cc3333;}
#addUsersSO{color: white; display: inline-block; background-color: #cc3333;}
#textLeftSO{
display: none;
/*width: 221px; margin-left: 58px;*/
}
#mainTextLeftSO{width: 221px;}
#emailControlSO{width: 25px; display: inline-block;margin-left: 59px; margin-left: 40px; margin-right: 20px;}
#emailLabelSO{width: 11px;}
#soRight{
display: inline-block;
/* border: 1px solid red; */
clear: left;
position: relative;
bottom: 160px;
/*bottom: 250px;*/
width: 300px;
float: right;
}
#shipSORight{width: 221px;}
#attentionSORight{width: 221px;}
#addressSORight{width: 221px;}
#citySORight{width: 70px; margin-left: 25px; height: 13px; /*border: 1px solid red;*/}
#stateSORight{width: 20px; height: 13px; }
#stateLabelSORight{display: inline-block; border: 1px solid right; margin-left: 1px;}
#zipSORight{width: 22px; height: 13px;}
#zipLabelSORight{display: inline-block; margin-left: 4px;}
#countrySORight{width: 90px; margin-left: 2px; height: 13px;}
#phoneSORight{width: 70px; height: 13px;}
#addressListSORight{color: white; display: inline-block; background-color: #cc3333; margin-left: 55px;}
#newAddressSORight{color: white; display: inline-block; background-color: #cc3333;}
#storeFilesText{width: 140px;}
#storeFilesButtonSO{margin-left: 140px; display: inline-block; background-color: #666; color: white;}
#uploadFilesText{width: 125px;}
#uploadFilesButtonSO{margin-left: 130px; display: inline-block; background-color: #666; color: white;}
#downloadFilesText{width: 125px;}
#downloadFilesButtonSO{margin-left: 115px; display: inline-block; background-color: #666; color: white;}
#filesSO{width: 31px;}
#fileContainerSO{
display: none;
}
#storeFilesControl{
width: 15px; display: inline-block;margin-left: 1px; margin-left: 10px;
}
#uploadFilesControl{
width: 15px; display: inline-block;margin-left: 45px;
}
#downloadFilesControl{
width: 15px; display: inline-block;margin-left: 45px;
}
#referenceSO{
display: none;
}
#soTable{
position: relative;
bottom: 150px;
/* bottom: 250px;*/
border: 1px solid right;
}
.vendorListHeading {
background-color: #1a4567;
color: white;
-webkit-print-color-adjust: exact;
}
#soSecondTable{
position: relative;
bottom: 150px;
/* bottom: 250px;*/
/* border: 1px solid green;*/
}
#quoteNumberPO{/*border: 1px solid red;*/ width: 310px;}
#shippingMethodPO{width: 310px;border: 1px solid black;}
#shippingAccountPO{width: 310px;border: 1px solid black;}
#paddingEP{padding-left: 37px;}
#QaPO{width: 6px;border: 1px solid black;}
#decriptionPO{width: 992px;/*border: 1px solid red;*/ }
#unitPricePO{width: 180px;/*border: 1px solid red;*/ }
#partIDPO{ border: 1px solid black;}
#paddingFirstEP{text-align: center;}
#mfgNamePO{ border: 1px solid black; }
#soLastRow{
position: relative;
bottom: 170px;
/* bottom: 250px;*/
/*border: 1px solid green;*/
}
#soTextConatiner{
display: inline-block; margin-left: 1px;
/*border: 1px solid red;*/
}
#soFirstTextLastRow{
width: 125px;
}
#soSecondTextConatiner{display: inline-block; margin-left: 4px; }
#soSecondTextLastRow{width: 124px;}
#subTotalContainer{width: 160px; display: inline-block; margin-left: 79px;/* border: 1px solid red;*/}
#markUpSoContainer{
display: none;
/*width: 258px; display: inline-block; position: relative; bottom: 81px; left: 440px; border: 1px solid red;*/}
#printSOButtons{
display: none;
}
#saveButton, #saveEmailButton, #printSummaryButton, #printDetailsButton{margin-top: 0px;}
/*
#subTotalPrice{margin-left: 76px; }
#taxPrice{margin-left: 170px;}
#shippingPrice{margin-left: 106px;}
#totalPrice{margin-left: 102px;}
*/
#subTotalPrice{margin-left: 10px; }
#taxPrice{margin-left: 107px;}
#shippingPrice{margin-left: 38px;}
#totalPrice{margin-left: 37px;}
}
<div class="bs-docs-example" id="soTable" style="padding-top: 10px;">
<table class="table" style="margin-bottom: 0px;width: 100%; max-width: 100%; background-color: transparent; border-collapse: collapse; border-spacing: 0;">
<thead>
<tr class="vendorListHeading" style="background-color: #1a4567;color: white; -webkit-print-color-adjust: exact;">
<th id="datePO">Date</th>
<th id="referencePO">PO Number</th>
<th id="termPO">Term</th>
<th id="taxPO">Tax</th>
<th id="quoteNumberPO">Quote Number</th>
<th id="statusPO">Status</th>
<th id="buyerPO">Account Mgr</th>
<th id="shippingMethodPO">Shipping Method</th>
<th id="shippingAccountPO">Shipping Account</th>
<th id="QaPO">QA</th>
</tr>
</thead>
<tbody>
<tr class="">
<td style="border: 1px solid black;">22</td>
<td style="border: 1px solid black;">20130000</td>
<td style="border: 1px solid black;">Jim B.</td>
<td style="border: 1px solid black;">22</td>
<td style="border: 1px solid black;">510 xxx yyyy</td>
<td style="border: 1px solid black;">zznn@abc.co</td>
<td style="border: 1px solid black;">PDF</td>
<td style="border: 1px solid black;">12/23/2012</td>
<td style="border: 1px solid black;">Approved</td>
<td style="border: 1px solid black;">PDF</td>
</tr>
</tbody>
</table>
</div>
最佳答案
创建一个只打印的样式表，你创建它们与标准 CSS 完全相同，除了你尝试使用 EM 而不是 PX。当你<link html页面的css，你一定要添加属性media="print"这将使样式表成为仅打印样式表。看看http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/进一步引用
关于html - 在打印CSS中调整列宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15075493/