JetDeveloper
02-26-2009, 12:37 PM
In Firefox 3.0, I have a nested table and it overflows the parent table cell, and it will not expand the parent table cell to fit the size of the nested table.
Below is the HTML.
<html>
<body>
<table border="1" bordercolor="red" />
<tr>
<td width="100px" bgcolor="#dedede">
<span style="width:100px; float: left">
<table border="1" width="100%">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
</table>
</span>
</td>
<td width="50px" bgcolor="#dedede"></td>
<td width="100px" bgcolor="#dedede"></td>
</tr>
</table>
</body>
</html>
The problem seems to be caused by the "float: left" style on the span element, but I need to have the float there. How can I keep the float and get the parent cell to expand to the size of the nested table?
Below is the HTML.
<html>
<body>
<table border="1" bordercolor="red" />
<tr>
<td width="100px" bgcolor="#dedede">
<span style="width:100px; float: left">
<table border="1" width="100%">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
</table>
</span>
</td>
<td width="50px" bgcolor="#dedede"></td>
<td width="100px" bgcolor="#dedede"></td>
</tr>
</table>
</body>
</html>
The problem seems to be caused by the "float: left" style on the span element, but I need to have the float there. How can I keep the float and get the parent cell to expand to the size of the nested table?