打印，表格不响应纵向和横向

我有一张表格显示一组数据。但是，当我尝试使用控制 + 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

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

打印，表格不响应纵向和横向

回答

相关问题