I am facing an issue with printing a table on my webpage. When I try to print using Control+P or window.print();, the width of the table does not adjust properly for portrait or landscape orientation. The table ends up exceeding the paper width. How can I resolve this problem?
This is how my table is structured:
<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 Styles:
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; }
Attached Screenshot: