html - 在打印CSS中调整列宽

Question

在打印预览中，我试图让所有标题列在一行中对齐......但一些标题需要另一行，因为列中的字母更多......如何使列的所有标题在一行中对齐......我调整了媒体 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>

Answer 1

创建一个只打印的样式表，你创建它们与标准 CSS 完全相同，除了你尝试使用 EM 而不是 PX。当你<link html页面的css，你一定要添加属性media="print"这将使样式表成为仅打印样式表。看看http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/进一步引用