Good morning all:
Here's my problem:
I have an outer div that has 10px padding. Inside that div I am building the main content of the page.
I have a div inside the outer div that contains a table with the table width set to 100%. This table blows out the right side of the inner div and adds a horizontal scrollbar to the browser window.
I'm not sure why this is happening and have pulled out some hair trying to resolve the issue without resorting to - dare I say it... a table based page...
Here's the snippet that I'm working with:
<div class="c1" width="100%">
<table width="100%" cellspacing="0">
<tr class="ch2">
<td>Order#</td>
<td>Order Date</td>
<td>Auctionworks Partner company</td>
<td>Order Status</td>
</tr>
<tr class="oddrow">
<td>2780312</td>
<td>10/01/2003</td>
<td>TestHibbieSeller</td>
<td>Shipped</td>
</tr>
<tr>
<td>456123</td>
<td>09/07/2003</td>
<td>Macks old stuff</td>
<td>Completed</td>
</tr>
<tr class="oddrow">
<td>159357</td>
<td>01/30/2003</td>
<td>Andyâs All-tin toys</td>
<td>Completed</td>
</tr>
<tr>
<td>141415</td>
<td>12/15/2002</td>
<td>Tomâs trains and stuff</td>
<td>Completed</td>
</tr>
<tr class="oddrow">
<td>678912</td>
<td>06/27/2002</td>
<td>Maryâs My Little Pony Parlor</td>
<td>Completed</td>
</tr>
</table>
</div>
Any and all help is greatly appreciated.
Have a great day y'all,
Pete
ARGGH!!!! Table width="100%" inside div throws off
It sounds like the Table is using the window as the measurement for 100%. Then you add the 20px padding (left and right) to 100% and everything gets squirrely. Did you try setting the width of the containing Div?
ARGGH!!!! Table width="100%" inside div throws off
Hi,
Assuming that class c1 holds your 10px padding only and no width declarations. Then you do not need to specify 100% width in the outer div.
The default width will be applied which will take into account the padding applied and should render without horizontal scrollbars.
Jjust use this:
<div class="c1"> <table width="100%" cellspacing="0"> <tr class="ch2"> etc.....
Paul