By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
462,044 Members | 746 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 462,044 IT Pros & Developers. It's quick & easy.

Table Width = 100% In FireFox Not Working

P: 74
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!

Expand|Select|Wrap|Line Numbers
  1. <div style="width:350px" class="ScrollContainer">
  2.        <table cellspacing="0px" style="display:inline; text-align:center;width:100%; margin:0;padding:0;" width="100%">
  3.                 <tr width="100%">
  4.                     <th align=center width="20%">Sel</th>
  5.                     <th align=center width="40%">Abc</th>
  6.                     <th align=center width="40%">Xyz</th>
  7.                 </tr>
  8.  
  9.         </table>
  10.         <div class="ScrollTable" style="height:80px; overflow:auto;">
  11.             <table id="Tbl_Content" cellspacing="0px" width="95%">
  12.                  <tbody>
  13.                      <tr>
  14.                        <td width="20%"><input type="checkbox" name="MyThingySelected" checked="checked"  value="Abc_1" /></td>
  15.                        <td width="40%">Abc1</td>
  16.                        <td width="40%">Xyz1</td>
  17.                    </tr>
  18.  
  19.                    <tr>
  20.                        <td width="20%"><input type="checkbox" name="MyThingySelected" checked="checked"  value="Abc_2" /></td>
  21.                        <td width="40%">Abc2</td>
  22.                        <td width="40%">Xyz2</td>
  23.                    </tr>
  24.  
  25.                    <tr>
  26.                        <td width="20%"><input type="checkbox" name="MyThingySelected" checked="checked"  value="Abc_3" /></td>
  27.                        <td width="40%">Abc3</td>
  28.                        <td width="40%">Xyz3</td>
  29.                    </tr>
  30.  
  31.                    <tr>
  32.                        <td width="20%"><input type="checkbox" name="MyThingySelected" checked="checked"  value="Abc_4" /></td>
  33.                        <td width="40%">Abc4</td>
  34.                        <td width="40%">Xyz4</td>
  35.                    </tr>
  36.  
  37.                    <tr>
  38.                        <td width="20%"><input type="checkbox" name="MyThingySelected" checked="checked"  value="Abcx_1" /></td>
  39.                        <td width="40%">Abcx1</td>
  40.                        <td width="40%">Xyzx1</td>
  41.                    </tr>
  42.  
  43.                    <tr>
  44.                        <td width="20%"><input type="checkbox" name="MyThingySelected" checked="checked"  value="Abcx_2" /></td>
  45.                        <td width="40%">Abcx2</td>
  46.                        <td width="40%">Xyzx2</td>
  47.                    </tr>
  48.  
  49.                    <tr>
  50.                        <td width="20%"><input type="checkbox" name="MyThingySelected" checked="checked"  value="Abcx_3" /></td>
  51.                        <td width="40%">Abcx3</td>
  52.                        <td width="40%">Xyzx3</td>
  53.                    </tr>
  54.  
  55.                    <tr>
  56.                        <td width="20%"><input type="checkbox" name="MyThingySelected" checked="checked"  value="Abcx_4" /></td>
  57.                        <td width="40%">Abcx4</td>
  58.                        <td width="40%">Xyzx4</td>
  59.                    </tr>
  60.                 </tbody>
  61.             </table>
  62.         </div>
  63.  
  64. </div>
Nov 29 '07 #1
Share this Question
Share on Google+
4 Replies

P: 74
..~--==bump==--~...

-LilOlMe
Dec 7 '07 #2

drhowarddrfine
Expert 5K+
P: 7,435
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.
Dec 7 '07 #3

Expert 100+
P: 303
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.
Dec 7 '07 #4

P: 74
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
Dec 17 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.