No replies
typo
Offline
newbie
Last seen: 17 years 35 weeks ago
Joined: 2004-09-18
Posts: 1
Points: 0

sorry for the long html code, but this was the simplest case where I was able to reproduce the error.

<html>
<head>
<style type="text/css">
td.big {
width:150px;
display:inline-block
}
td.small {
width:30px;
display:inline-block
}
table {
width:100%;
display:inline-block
}
</style>
</head>
<body>
<table class="inner">
<tr>
<td>
<table class="inner" border="1">
<tr>
<td class="big">
A
</td>
<td>
B
</td>
</tr>
<tr>
<td colspan="2">
<table class="outer" border="1">
<tr>
<td class="small">
C
</td>
<td>
<table class="outer" border="1">
<tr>
<td class="big">
D
</td>
<td>
E
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

the problem is that the columns in the first row in the outer table arent of correct size. on my screen the first rows first column is around 900 pixels and the last column 100 pixels. when it should be 150 pixels and 850 pixels.

if I remove the class from the inner most tables first td, the outer most tables first row is displayed as it should be. any ideas why this happens and any solutions or work arounds?

any help is much appreciated, I'm out of ideas on this one.

-typo