Problema para desplazar tbody en IE 9 (altura de tbody = altura-línea)

Lo siento por mi mal inglés, espero que entiendas lo que quiero decir …

Estoy tratando de implementar una tabla HTML que admita el desplazamiento de cuerpos de tabla independientemente del encabezado de la tabla.

Encontré la siguiente pregunta que me ayudó mucho: ¿Cómo desplazar el “cuerpo” de la mesa independientemente de “thead”?

Probé el siguiente código, funciona en Chrome (22), Firefox (16) y Opera (12) sin problemas:

HTML:

Title1 Title2
... ...

CSS:

 thead, tbody { display: block; } tbody { height:500px; overflow-y:auto; overflow-x:hidden; } thead { line-height: 20px; } 

Así que funciona en los navegadores principales, excepto IE 9, en IE, tengo algunos problemas:

  • La altura del cuerpo no está definida (así que no tengo ninguna barra de desplazamiento)
  • Cada uno tiene una altura de 500 px (la altura del cuerpo en otros navegadores)

Los dos ejemplos siguientes tienen exactamente los mismos problemas: http://jsfiddle.net/nyCKE/2/ , http://www.imaputz.com/cssStuff/bigFourVersion.html

Vi la siguiente pregunta (y respuesta) pero no me ayuda: IE9 + css: problema con la tabla de encabezado fija

Así que estoy seguro de que el error proviene de IE pero no tengo idea de cómo solucionarlo sin cambiar mi estructura HTML.

¿Alguien tiene alguna idea?

He tratado de arreglarlo un poco. Espero que te de alguna idea.

HTML

 

Problem

Solution

CSS

 p {margin:0 0 1em} table p {margin :0} .wrap { margin:50px 0 0 2%; float:left; position:relative; height:200px; overflow:hidden; padding:25px 0 0; border:1px solid #000; width:150px } .inner { padding:0 ; height:200px; overflow:auto; } table { margin:0 0 0 -1px; border-collapse:collapse; width:130px} td { padding:5px; border:1px solid #000; text-align:center; } thead th { font-weight:bold; text-align:center; border:1px solid #000; padding:0 ; color:#000; } thead th {border:none;} thead tr p { position:absolute; top:0; } .last { padding-right:15px!important; }​ 

Demostración http://jsfiddle.net/nyCKE/272/

Aquí hay una respuesta más corta que le permite desplazarse por la tabla con un encabezado fijo en ie9.

Agregar un div condicional alrededor de la tabla

   ... 

Agregue los siguientes estilos para ie9

  .old_ie_wrapper { height: 500px; overflow: auto; } .old_ie_wrapper tbody { height: auto; } .old_ie_wrapper thead tr { position: absolute; } .old_ie_wrapper tbody tr:first-child { height: 67px; vertical-align: bottom; } 

Tendrá que ajustar las alturas y probablemente otras propiedades basadas en su tabla.