Table Width = 100% In FireFox Not Working

[lilOlMe]

Hi there!


I'm developing a "scrollable table".
At first I started using CSS. It worked pretty well until I found a bug that happens when placing this table into a tabbing control...

So I decided to develop 2 tables...one for the header information and one for the body. I simply placed the body into a <div> with style="overflow:auto".

I've set the header table to be 100%...expecting it to span 100% of the parent.
This works fine in other browsers but for some reason FireFox does not do this.

I seem to be the only person with this problem...
Normally people are complaining that the width is larger than the parent container...

In my case the width is set to the the size of the content of its cells...it is Much smaller than the parent container and so it doesn't match up properly with the content cells...

Any suggestions on how to correct this problem would be appreciated.

The following is the html code that I am using.

Thanks in advance!

<div style="width:350px" class="ScrollContainer">
       <table cellspacing="0px" style="display:inline; text-align:center;width:100%; margin:0;padding:0;" width="100%">
                <tr width="100%">
                    <th align=center width="20%">Sel</th>
                    <th align=center width="40%">Abc</th>
                    <th align=center width="40%">Xyz</th>
                </tr>
 
        </table>
        <div class="ScrollTable" style="height:80px; overflow:auto;">
            <table id="Tbl_Content" cellspacing="0px" width="95%">
                 <tbody>
                     <tr>
                       <td width="20%"><input type="checkbox" name="MyThingySelected" checked="checked"  value="Abc_1" /></td>
                       <td width="40%">Abc1</td>
                       <td width="40%">Xyz1</td>
                   </tr>
 
                   <tr>
                       <td width="20%"><input type="checkbox" name="MyThingySelected" checked="checked"  value="Abc_2" /></td>
                       <td width="40%">Abc2</td>
                       <td width="40%">Xyz2</td>
                   </tr>
 
                   <tr>
                       <td width="20%"><input type="checkbox" name="MyThingySelected" checked="checked"  value="Abc_3" /></td>
                       <td width="40%">Abc3</td>
                       <td width="40%">Xyz3</td>
                   </tr>
 
                   <tr>
                       <td width="20%"><input type="checkbox" name="MyThingySelected" checked="checked"  value="Abc_4" /></td>
                       <td width="40%">Abc4</td>
                       <td width="40%">Xyz4</td>
                   </tr>
 
                   <tr>
                       <td width="20%"><input type="checkbox" name="MyThingySelected" checked="checked"  value="Abcx_1" /></td>
                       <td width="40%">Abcx1</td>
                       <td width="40%">Xyzx1</td>
                   </tr>
 
                   <tr>
                       <td width="20%"><input type="checkbox" name="MyThingySelected" checked="checked"  value="Abcx_2" /></td>
                       <td width="40%">Abcx2</td>
                       <td width="40%">Xyzx2</td>
                   </tr>
 
                   <tr>
                       <td width="20%"><input type="checkbox" name="MyThingySelected" checked="checked"  value="Abcx_3" /></td>
                       <td width="40%">Abcx3</td>
                       <td width="40%">Xyzx3</td>
                   </tr>
 
                   <tr>
                       <td width="20%"><input type="checkbox" name="MyThingySelected" checked="checked"  value="Abcx_4" /></td>
                       <td width="40%">Abcx4</td>
                       <td width="40%">Xyzx4</td>
                   </tr>
                </tbody>
            </table>
        </div>
 
</div>

[lilOlMe]

..~--==bump==--~...

-LilOlMe

[drhowarddrfine]

You have the table set as 'inline'. Inline elements cannot have a width. IE, and whatever 'other' browsers, are working incorrectly.

Just remove the 'display:inline' and it will work.

[improvcornartist]

It appears that the display:inline in the first table style is causing your header row to not span the width of the div. You could try removing that from the style and see what that does.

Edit:
Apparently I answered at the same time as drhowarddrfine. Sorry for the double answer.

[lilOlMe]

I can't believe I over looked the inline setting!
I learned my lesson with inline elements months ago.
>>blush<<
Sometimes I can just be so...
Blind

Thanks for your help!
Removing the inline style setting resolved the problem.

-LilOlMe