HTML Table Design issue with 22 column in row with Menu collapse - html

Question

I have one table shown on screen with menu layout.
While menu is not collapsed the table is showing perfectly on screen like the below image.
But once I Collapse the Menu toggle button the table design is getting out of screen like below image. Last 3 columns were out of screen body.
Below is the code for table I am using.
<table width="100%" border="1" cellpadding="1" cellspacing="2" bordercolor="#999999">
<tbody>
<tr>
<td height="24" width="20%">Customer</td>
<td width="15%">Purchase</td>
<td width="15%">Branch</td>
<td width="15%">Status</td>
<td width="15%">PO Issue date</td>
<td width="15%">Delivery Date</td>
<td width="15%">Return Date</td>
<td width="15%">Approved By</td>
<td width="15%">Equipment Recovery</td>
<td width="15%">Labor Recovery</td>
<td width="15%">Shipping Recovery</td>
<td width="15%">Purchase Recovery</td>
<td width="15%">Other Recovery</td>
<td bgcolor="#E6E6E6"><strong>Total</strong></td>
<td>Equipment Rental</td>
<td>Labor</td>
<td>Shipping</td>
<td>Equipment Purchase</td>
<td>Other</td>
<td>Tax</td>
<td>Loss Code</td>
<td nowrap="nowrap" width="100%">Internal Notes</td>
</tr>
<tr>
<td height="24" colspan="13">
<div align="right"><strong>TOTALS</strong></div>
</td>
<td bgcolor="#E6E6E6">$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
Can anybody have look and let me know how I can overcome it.