打印，表格不響應縱向和橫向

我有一張表格顯示一組數據。但是，當我嘗試使用控制 + P或window.print();打印頁面時，表格寬度不響應縱向或橫向。表格寬度將超過紙張寬度。我怎樣才能解決這個問題？打印，表格不響應縱向和橫向

我的表格標記：

<table class="datatable"> 
      <thead> 
       <tr> 
        <th class="sorting" width="15">ID</th> 
        <th class="sorting" width="15">Type</th> 
        <th class="sorting" width="30">Property Type</th> 
        <th class="sorting" width="50">Name/Address</th> 
        <th class="sorting" width="10">Block</th> 
        <th class="sorting" width="35">Unit</th> 
        <th class="sorting" width="35">Sqft</th> 
        <th class="sorting" width="35">$</th> 
        <th class="sorting" width="35">$/Sqft</th> 
              <th class="sorting" width="35">R.Yield</th> 
              <th class="sorting" width="35">Status</th> 
       </tr> 
      </thead> 
      <tbody> 

       <tr id="listing1" class="odd"> 
        <td class="sorting_1">1</td> 
        <td>Sale</td> 
        <td>Apartment/Condo</td> 
        <td> 
         <a href="/index.php/listings/view/7" title="Parc Rosewood">Parc Rosewood</a>       <br /> 
         Default Administrator (12345678) 
        </td> 
        <td>10</td> 
        <td>08-90</td> 
        <td>227</td> 
        <td>$2,170,000</td> 
        <td>$9,559</td> 
        <td> 
         1%      </td> 
        <td> 
         Available      </td> 
       </tr> 

       <tr id="listing2" class="even"> 
        <td class="sorting_1">2</td> 
        <td>Sale</td> 
        <td>Apartment/Condo</td> 
        <td> 
         <a href="/index.php/listings/view/3" title="Woodgrove Condo">Woodgrove Condo</a>       <br /> 
         John Doe (12345678) 
        </td> 
        <td>5</td> 
        <td>03-12</td> 
        <td>2,360</td> 
        <td>$1,900,000</td> 
        <td>$805</td> 
        <td> 
         --      </td> 
        <td> 
         Available      </td> 
       </tr> 

       <tr id="listing3" class="odd"> 
        <td class="sorting_1">3</td> 
        <td>Sale</td> 
        <td>Apartment/Condo</td> 
        <td> 
         <a href="/index.php/listings/view/2" title="Casablanca">Casablanca</a>       <br /> 
         John Champion (12345678) 
        </td> 
        <td>7</td> 
        <td>01-36</td> 
        <td>1,326</td> 
        <td>$1,000,000</td> 
        <td>$754</td> 
        <td> 
         --      </td> 
        <td> 
         Available      </td> 
       </tr> 

      </tbody> 
     </table>

CSS標記：

table { 
    margin: 20px 0px 10px 0px; 
    padding: 0px; 
    border-collapse:collapse; 
    border-spacing: 0px; 
    width: 100%; 
} 
thead th { text-align: left; padding: 2px 5px; border-bottom: 1px solid #E0E0E0; }

截圖： enter image description here

來源

2012-06-21 Shawn Ang

我已經找到了解決辦法，看來我的包裝是使看起來像一個小丑。

HTML標記

<div class="wrapper"> 
    <div class="container"> 
      <div class="row">

CSS標記

.row { 
    width: 100%; 
    max-width: 1440px; 
    min-width: 1200px; 
    margin: 0px auto; 
}

正確的CSS標記（在平面媒體查詢這樣做）

.row { 
    width: 100%; 
    margin: 0px auto; 
}

感謝所有幫助！

來源

2012-06-21 08:07:54

你的代碼是正確的，表格的寬度在打印預覽很好（在FF測試擴展， IE9，Chrome ...在A4上打印，縮放至100％ - 不縮小）。檢查您的打印機默認設置和瀏覽器打印首選項（頁面設置和縮放）。

來源

2012-06-21 07:34:04 skobaljic

我在其他網站上也嘗試過使用表格來顯示他們的數據，但在使用打印預覽時似乎沒有問題。 –

如果您希望CSS可以進行打印調整，您必須打開「@media print」規則。

例子：

@media print { 
    /* any css rule */ 
    table { 
    margin: 20px 0px 10px 0px; 
    padding: 0px; 
    border-collapse:collapse; 
    border-spacing: 0px; 
    width: 100%; 
    } 
    thead th { text-align: left; padding: 2px 5px; border-bottom: 1px solid #E0E0E0; } 
}

來源

2012-06-21 07:48:52 pbibergal

:(不起作用，我附上了截圖。 –

打印，表格不響應縱向和橫向

回答

相關問題