我有一个显示一组数据的表格。但是当我尝试使用Control+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; }
截屏: