tablas tabla para imagenes hojas estilos estilo ejemplos diseƱo con bordes avanzado css internet-explorer internet-explorer-11 css-tables

css - para - tablas en html5



Altura de las celdas de tabla calculada de forma diferente en IE11 (3)

Comportamiento extraño e interesante por IE sobre table-cell aquí. Si desea un enfoque, debe poner la celda en el bloque en línea y establecer el valor de altura, luego alinear el contenido usando línea-altura y también restablecer la altura de línea para el contenedor de texto como:

td { display: inline-block; height: 137px; position: relative; line-height: 137px; } p { display: inline-block; vertical-align: middle; background-color: #dedede; line-height: 1; }

Prueba IE, espero que esto te ayude: http://codepen.io/pik_at/pen/WbyZrG

El problema al que me enfrento es que IE 11 parece tener una altura interna <td> inconsistente en un solo <tr> mientras que otros navegadores lo mantienen igual.

Aquí hay un bolígrafo que ilustra mi problema: http://codepen.io/anon/pen/emKEBZ

En mi diseño, tengo un pseudo-elemento (borde verde) absolutamente posicionado que quiero mostrar en un (externo) <td> . Me gustaría que siempre sea tan alto como el <tr> se encuentra. El contenido de <td> s es dinámico; no tengo control sobre su tamaño (como lo hago en el lápiz).

Le di height: 100% , suponiendo que cada <td> en una fila tiene la misma altura.

td { position: relative; } td:before { content: ""; display: block; position: absolute; top: 0; left: -5px; width: 3px; height: 100%; background-color: green; }

Y sí, esa altura se calcula con el mismo valor en todas las celdas de la misma fila en Firefox y Chrome:

pero a diferentes alturas para cada celda en IE 11:

El problema parece ser que en height: 100% IE se refiere a la altura interna (la que está dentro del relleno) de la que contiene <td> , mientras que otros navegadores toman la altura total (altura + relleno + borde). E incluso entonces, la altura interna de todos los <td> s a lo largo de uno <tr> es idéntica en Firefox, mientras que no está en IE. ¿Alguno de esos enfoques está mal? ¿Hay alguna manera de obligar a IE a funcionar como lo hacen otros navegadores?


Finalmente logré hacer eso. Aquí está el código, espero que ayude. Violín aquí.

var spans = document.querySelectorAll( "span.bar" ), count = spans.length; while ( count-- ) { spans[count].style.height = spans[count].parentElement.offsetHeight + "px"; }

body { padding:15px; } table { border: 1px solid black; border-spacing: 10px; cell-spacing: 0; } tr { border: 1px solid red; } td { vertical-align:center; position:relative; box-sizing: border-box; position: relative; border: 1px solid black; } td .bar:first-child, td .bar:last-child { display: block; background: green; width: 3px; left: -5px; height: 100%; position: absolute; top: 0; z-index: 1; } p { margin: 0; background-color: #dedede; padding: 0px; } .tall { height: 100px; } .medium { height: 60px; } .short { height: 30px; }

<table cellspacing="1" cellpadding "0" border="0"> <tr> <td> <span class="bar"></span><p class="tall">Save me!</p><span class="bar"></span> </td> <td> <span class="bar"></span><p class="medium">From problems</p><span class="bar"></span> </td> <td> <span class="bar"></span><p class="short">With IE</p><span class="bar"></span> </td> </tr> </table>


Voy a agregar un margin para un total de 100

.tall { height: 100px; } .medium { height: 60px; margin: 20px 0; } .short { height: 30px; margin: 35px 0; }