¿Puedo usar una altura mínima para mesa, tr o td?

120

Estoy tratando de mostrar algunos detalles de una recepción en una tabla.

Quiero que esa mesa tenga una altura mínima para mostrar los productos. Entonces, si solo hay un producto, la tabla tendría al menos un espacio en blanco al final. Por otro lado, si hay 5 o más productos, no será ese espacio vacío.

Lo he intentado con este CSS:

table,td,tr{
  min-height:300px;
}

Pero no está funcionando.

Gracias por adelantado.

html css

— kilkadg
fuente

1

Sería útil si crea un violín para que probemos su código.

— mavrosxristoforos

39

No es una buena solución, pero pruébalo así:

<table>
    <tr>
        <td>
            <div>Lorem</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>Ipsum</div>
        </td>
    </tr>
</table>

y establezca los divs en la altura mínima:

div {
    min-height: 300px;
}

Espero que esto sea lo que quieres ...

— Arnold Zak
fuente

2

@SackySan, debe dar las clases de divs y luego hacer que esta regla se aplique solo a esa clase

— Zachary Weixelbaum

408

heightpara tdtrabajos como min-height:

td {
  height: 100px;
}

en vez de

td {
  min-height: 100px;
}

Las celdas de la tabla crecerán cuando el contenido no se ajuste.

https://jsfiddle.net/qz70zps4/

— Aureliano Far Suau
fuente

2

En mi Google Chrome (versión 47.0.2526.106 m) que se ejecuta en Windows 7, encontré que la configuración heightde un en tdrealidad se procesa como una paddingparte superior e inferior, lo que puede introducir algún problema de diseño, ya que cree que es realmente un heightespacio. No se muestra como un estilo o como un estilo calculado en las herramientas de desarrollo, pero cuando coloca el mouse sobre el elemento html inspeccionado, se muestra en la pantalla.

— Felypp Oliveira

¡pero la pregunta estaba sobre la altura mínima que no funciona! ¿Qué sucede si tiene un texto largo y necesita otra línea con altura? Se estropeará

— CMS

como dijo @CMS, preguntó acerca de min-heightno, heightsin embargo, como @frank explica a continuación, se comporta de la misma manera table td. Entonces, tal vez esto necesite una explicación un poco mejor.

— dft

3

Esta es definitivamente una mejor respuesta que la aceptada.

— Jinjubei

2

Esta respuesta me acaba de ahorrar potencialmente horas de trabajo, debería ser la respuesta.

— Luke Pring

28

La solución sin divse usa un pseudo elemento como ::afteren el primero tdde la fila con min-height. Guarde su HTML limpio.

table tr td:first-child::after {
   content: "";
   display: inline-block;
   vertical-align: top;
   min-height: 60px;
}

— Alex Omelnitckii
fuente

13

En CSS 2.1, el efecto de 'altura mínima' y 'altura máxima' en tablas, tablas en línea, celdas de tabla, filas de tabla y grupos de filas no está definido.

Así que intente envolver el contenido en un div y dele al div un min-height jsFiddle aquí

<table cellspacing="0" cellpadding="0" border="0" style="width:300px">
    <tbody>
        <tr>
            <td>
                <div style="min-height: 100px; background-color: #ccc">
                Hello World !
                </div>
            </td>
            <td>
                <div style="min-height: 100px; background-color: #f00">
                Goog MOrning !
                </div>
            </td>
        </tr>
    </tbody>
</table>

— Sobin Agustín
fuente

5

si establece style = "height: 100px;" en un td si el td tiene contenido que hace crecer la celda más que eso, lo hará sin necesidad de una altura mínima en un td.

— franco
fuente

0

Las tablas y las celdas de la tabla no usan la min-heightpropiedad, estableciendo su heightaltura mínima, ya que las tablas se expandirán si el contenido las estira.

— Agu Dondo
fuente

-1

Simplemente use la entrada css de min-height en una de las celdas de la fila de su tabla. También funciona en navegadores antiguos.

.rowNumberColumn {
    background-color: #e6e6e6;
    min-height: 22;
}

<table width="100%" cellspacing="0" class="htmlgrid-table">
    <tr id="tr_0">
            <td width="3%" align="center" class="readOnlyCell rowNumberColumn">1</td>
            <td align="left" width="40%" id="td_0_0" class="readOnlyCell gContentSection">411978430-Intimate:Ruby:Small</td>

— Sacky San
fuente