html - internet - IE9, tablas y pantalla: bloque

bootstrap 4 compatibilidad navegadores

Question

Para la versión móvil de bajo ancho de mi sitio, cambio la display de cierta table , tr , td y th al block , para permitir que se acumulen verticalmente. Utilizo esto como una técnica para permitir que las tablas anchas continúen mostrando todo su contenido sin desbordar fuera de su contenedor.

Funciona perfectamente en todos los 5 navegadores modernos, pero no funciona en IE9. ¿Hay alguna manera de hacer esto allí?

Aquí hay un jfiddle: http://jsfiddle.net/cfCzD/4/

Aquí hay capturas de pantalla

IE11 (objetivo):

IE9 (mal resultado):

Answer 1

Algunos enlaces útiles (si aún no los has revisado):

1. Trucos de CSS: tablas de datos receptivos
   
2. Trucos de CSS: Guía completa del elemento de tabla

Answer 2

Tal vez deberías tratar de usar etiquetas div para la tabla

p.ej:

<div style="display:table">
  <div style="display: table-row">
    <div style="display: table-cell">
      content content
    </div>
    <div style="display: table-cell">
      content content content
    </div>
  </div>
</div>

esto funcionará excelente para ie8 +

Answer 3

http://jsfiddle.net/xnKTH/

td {
    width: 100%/9;
    float: left/9;
}

Agregue un ancho en el TD y flote.