Problema para se deslocar no IE 9 (altura do corpo = linha de altura)
Desculpe pelo meu mau Inglês, espero que você entenda o que eu quero dizer ...
Eu estou tentando implementar uma tabela HTML que suporte a rolagem de corpos de tabela independentemente do cabeçalho da tabela.
Eu encontrei a seguinte pergunta que me ajudou muito:Como rolar "tbody" da tabela independente de "thead"?
Eu testei o seguinte código, ele funciona no Chrome (22), Firefox (16) e Opera (12) sem problemas:
HTML:
<table>
<thead>
<tr>
<th>Title1</th>
<th>Title2</th>
<!-- ... -->
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<!-- ... -->
</tr>
<!-- ... -->
</tbody>
</table>
CSS:
thead, tbody {
display: block;
}
tbody {
height:500px;
overflow-y:auto;
overflow-x:hidden;
}
thead {
line-height: 20px;
}
Por isso, funciona nos principais navegadores, exceto o IE 9, no IE, eu tenho alguns problemas:
A altura do corpo não está definida (por isso não tenho barra de rolagem)Cada um tem uma altura de 500px (a altura do corpo em outros navegadores)Os dois exemplos a seguir têm exatamente os mesmos problemas:http://jsfiddle.net/nyCKE/2/ , http://www.imaputz.com/cssStuff/bigFourVersion.html
Eu vi a seguinte pergunta (e resposta), mas isso não me ajuda:IE9 + css: problema com tabela de cabeçalho fixa
Então, tenho certeza de que o bug vem do IE, mas não tenho a menor idéia de como corrigi-lo sem alterar minha estrutura HTML.
Alguém tem alguma ideia?