Olá pessoal.
Preciso exibir duas tabelas no IE 7, uma do lado da outra, porém sem usar uma tabela pai. Pra facilitar, vai aí um código exemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tests</title>
</head>
<body>
<table width="500px" border="1">
<tr>
<td width="90%">
<div id="inliner" style="width: 100%; background-color: #dddddd">
<div style="position:static; display: inline; border: solid #000000 1px; background-color: #aaaaaa;">
<table id="leftTable" style="margin-left: 15px;">
<tr>
<td>
<span>
<img src="bullet.jpg" />
<span>Esquerda</span>
</span>
</td>
</tr>
<tr>
<td>
<input type="text" size="18">
</td>
</tr>
</table>
</div>
<div style="position:static; display: inline; border: solid #000000 1px; background-color: #aaaaaa;">
<table id="rightTable" style="margin-left: 15px;">
<tr>
<td>
<span>
<img src="bullet.jpg" />
<span>Direita</span>
</span>
</td>
</tr>
<tr>
<td>
<input type="text" size="18">
</td>
</tr>
</table>
</div>
</div>
</td>
<td>
<input type="submit" value="OK">
</td>
</tr>
</table>
</body>
</html>
Não devo mexer muito na estrutura desse código. Tentei utilizar a propriedade display com o valor inline nas tabelas leftTable e rightTable, porém, o resultado que obtive foi uma coisa nada a ver (vide anexo “!1wrong.bmp”). Eu queria algo como o anexo “!2desired.bmp”, mas não consigo…
O interessante é que se o conteúdo das divs que estão com “display: inline” for apenas um texto simples, aí fica certinho…
Será que não tem jeito mesmo?
