table inside div, ie and mozilla.

nesting tables inside div in css

[widha]

Hi I am having a problem with css divs and tables.
// css part:
div.x {
margin: 0 10 10;
border-top-width: 0px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #FF9900;
border-bottom-color: #FF9900;
border-left-color: #FF9900;
}
// html part:

<div class="x">
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</table>
</div>

Problem is that I want the table to span the lenght of the div and be scalable..... so I set the table width to be 100% using css... it works perfectly in Mozilla this way but not in IE.... In IE the table makes the right margin on the div dissapear. Is there a way to do it that I am missing so that it works in IE?

Basically I need a margin on both sides of a table... and the table to only have borders on the outer edges.... I guess it could be done by specifying borders in css for the different td in the table but I thought that this way might work...

Anyway if anyone could help me out that would be great. Thanks much.

[DanA]

I think this fix for IE 6 I used may help you
table{
margin:auto;
width:96%;
}

But as far as I remember I also had to set min-width for the body section.

[widha]

Thanks for the tip.... well now I got it to work for IE by having the div width set to 100% but that screws it up for mozilla

I think you may be right about seting a fixed width for the interior.....

Thanks for the help.

Going to play around with it a little more though so if you have any more ideas please let me know.

Thanks again.

[iamlost]

Your problem is that margin is added to the 100% width so that you are forcing the table outside the div.

I suggest a different approach.

/*css: borders on both for easy viewing of results. Adjust all values as desired.*/

div.x {
width: 80%;
left: 0;
padding: 0;
margin: 0;
border: 2px #000 solid; 
}
div.x table {
width: 90%;
border: 2px #f90 solid; 
padding: 0;
margin: 0 5% 0 5%;
}

[widha]

Thanks for the help.... It works perfectly now.