2 replies [Last post]
v65magna
Offline
newbie
Last seen: 15 years 48 weeks ago
Joined: 2003-08-19
Posts: 1
Points: 0

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

migs_mhdy
Offline
newbie
PA, USA
Last seen: 16 years 3 days ago
PA, USA
Timezone: GMT-4
Joined: 2003-07-21
Posts: 6
Points: 0

ARGGH!!!! Table width=&quot;100%&quot; 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?

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 6 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

ARGGH!!!! Table width=&quot;100%&quot; 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