¿Se puede hacer que IE 9 (o anterior) coloque los elementos de la tabla como si se tratara de una visualización regular: elementos de bloque?

En WebKit, Firefox y Opera, puede configurar los distintos elementos de la tabla a display: block para detenerlos mostrando como las tablas:¿Se puede hacer que IE 9 (o anterior) coloque los elementos de la tabla como si se tratara de una visualización regular: elementos de bloque?

http://jsfiddle.net/bHzsC/

Esto puede ser útil en pantallas más pequeñas (por ejemplo, iPhone) que no tiene espacio para mostrar las mesas distribuidas tradicionalmente.

IE 9, sin embargo, todavía establece las celdas de la tabla una al lado de la otra horizontalmente - no parece respetar display: block en los elementos de la tabla.

¿Hay algún otro código que impida que IE 9 (o anterior) coloque las tablas como tablas?

Fuente

2012-04-03 Paul D. Waite

Una pregunta similar de hace mucho tiempo: http://stackoverflow.com/a/5091822/405015. Simplemente no funcionará en IE7, si esperabas poder soportarlo. 'box-sizing: border-box' será útil si tienes que lidiar con' padding'. – thirtydot

@thirtydot je, sí, acabo de encontrar eso. Primero miré pero estaba buscando con _IE9_ y no solo con IE. Acabas de obtener un +1 por tu respuesta a la pregunta anterior :-) – andyb

@andyb: Es gracioso que hayas encontrado más de mis viejas respuestas relevantes que yo :) – thirtydot

Adición float:left;clear:left; hará que IE 9 comporta un poco mejor, pero el ancho de cada elemento no será correcto. Si agrega width:100% a la mezcla, parece comportarse igual que en Chrome y Firefox.

table, 
thead, 
tfoot, 
tbody, 
tr, 
th, 
td { 
    display:block; 
    width:100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    float:left; 
    clear:left; 
}

Editar: Esto se ha hecho antes How can I make "display: block" work on a <td> in IE? y parcialmente cubierta en la que How can I get inline-block to render consistently when applied to table cells? con razón mencionar que cualquier relleno hará que el width:100% para crear una barra de desplazamiento horizontal. Sin embargo, esto se puede evitar con box-sizing:border-box;, o utilizando un ancho convenientemente menor o un elemento que contenga un ancho fijo.

Fuente

2012-04-03 09:28:38 andyb

+1 - No había pensado en el ancho. Sin embargo, no necesitas el 'display: block'. ¡El 'flotante' se ocupa de eso por ti! –

Además, ¿de dónde es tu foto de perfil? Lo reconozco de un juego que solía jugar cuando era pequeño, pero no recuerdo el nombre. Estoy seguro de que fue un ataque del algo ... –

@MyHeadHurts Ah, pero el ancho causará problemas con la barra de desplazamiento si se usa relleno. Además, la foto de perfil de [Día del tentáculo] (http://en.wikipedia.org/wiki/Day_of_the_tentacle) :-) – andyb

¿Qué tal:

table, 
thead, 
tfoot, 
tbody, 
tr, 
th, 
td { 
    float:left; 
    clear: left; 
}

Podría tener repercusiones en su diseño con él utilizando floats

Ejemplo de trabajo: http://jsfiddle.net/bHzsC/1/

Fuente

2012-04-03 09:17:38

¿Se puede hacer que IE 9 (o anterior) coloque los elementos de la tabla como si se tratara de una visualización regular: elementos de bloque?

Respuesta

Cuestiones relacionadas