thead - tfoot html

Min-Height para una tabla en Firefox no funciona

Question

Básicamente, me gustaría tener una altura mínima para mi mesa, de manera que pueda ajustarse de manera responsiva por sus propios medios. Esto funciona a la perfección en Chrome, pero realmente no le gusta FireFox, probó la pantalla: bloque; Pero eso empeora las cosas en el cromo.

Gracias.

.table-wrap {
    min-height: 323px;
}

table {
    width: 100%;
    min-height: 323px;
}

table tr {
    min-height: 54px;
}

Answer 1

Agrega height: 0 y eso hará que Firefox tome la min-height

Answer 2

Desafortunadamente, específicamente con Firefox esto es un error: https://bugzilla.mozilla.org/show_bug.cgi?id=307866

min-height: [whatever]

no jugará bien con

display: table

La única alternativa es utilizar una altura fija.

Caso cerrado

Answer 3

El efecto de la propiedad min-height no está definido para tablas, filas de tablas y celdas de tablas.

Consulte: http://www.w3.org/TR/CSS21/visudet.html#min-max-heights

Supongamos que su marca se parece al siguiente HTML:

<div class="table-wrap">
    <table>
        <tr>
            <td>Cell 1 Donec ipsum libero...</td>
        </tr>
        <tr>
            <td>Cell 2</td>
        </tr>
    </table>
</div>

Ahora, considera el siguiente CSS:

.table-wrap {
    min-height: 323px;
    border: 1px dotted blue;
}
table {
    width: 400px;
    height: 323px;
    border: 1px dashed red;
}
table tr {
    height: 54px;
}
table td {
    border: 1px dotted red;
}

En este caso, la tabla tendrá una altura mínima de 323 píxeles, y esta altura se distribuirá entre las distintas filas de la tabla en función de los detalles del contenido en las celdas de la tabla de cada fila.

Como mínimo, cada fila tendrá al menos 54 px de altura.

Si tiene muchas filas con celdas cortas (menos de 54 px en altura), finalmente la altura de la tabla se ajustará para acomodar las filas.

Si la tabla tiene solo unas pocas filas con celdas cortas, entonces las filas aumentarán en altura para llenar la altura de la tabla de 323px.

El elemento primario .table-wrap no tiene ningún efecto sobre la altura de la tabla en este caso.

Vea el violín en: http://jsfiddle.net/audetwebdesign/zMtBu/

Answer 4

cambiar la altura mínima de la mesa a la altura. Si el contenido es más alto, la tabla se ampliará de todos modos.