What property I missed?

liunx

Guest
Hi

If you put one table inside another table even if you set border to 0px, padding to 0px and border-collapse to collapse still it appears 2 px larger than the same table with the same width and no table inside it. So there must be another property that either we can or we cannot set to zero. is this conclusion correct and if it is what that property is?

An example of what I say is below. if you implement it you would see two red block which the one at the bottom is wider than the one at the top.

And what is important that I don't want to change the width of the table inside the other one. if I set the width of the table inside to 798px, both block would be the same width but this is not I want, I want the property that interfere.

<STYLE>
table{
border-collapse:collapse;
}
td{
padding:0px;
}
</STYLE>

<TABLE STYLE='background-color:red;width:800px;border:1px solid black;'>
<TR>
<TD>

</TD>
</TR>
</TABLE>


<TABLE STYLE='background-color:red;width:800px;border:1px solid black;'>
<TR>
<TD>
<TABLE STYLE='background-color:red;width:800px'>
<TR>
<TD>

</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>Hi there amahmood,

it is not really a case of finding...
another property that either we can or we cannot set to zero.
...but more a case of setting the inner table to...

width:100% like this...

<style type="text/css">

.outer{
background-color:red;
width:800px;
border:1px solid black;
margin:4px;
}
#inner {
background-color:red;
width:100%;
border-collapse:collapse;
}
td {
padding:0px;
}

</style>

<table class="outer">
<tr>
<td>

</td>
</tr>
</table>


<table class="outer">
<tr>
<td>
<table id="inner">
<tr>
<td>

</td>
</tr>
</table>
</td>
</tr>
</table>

cootheadThanks coothead.
That works for me.
 
Back
Top