Cómo forzar min-height en la mesa

Tengo este código:

This is my text that I need in 2 lines
Second Line

Como puede ver, la primera tr / td debe tener una altura de 60px ( min-height:60px ) pero de hecho no lo es.

Por muchas razones, no puedo usar la altura directamente (este código está formateado a través del sistema administrativo, en un boletín informativo).

Entonces, ¿cómo puedo tomar toda la altura en el td a través de la altura mínima?

Además, intenté poner min-height:60px; en tr, pero nada cambia …

min-height no funciona para los elementos de la tabla:

En CSS 2.1, el efecto de ‘min-width’ y ‘max-width’ en tablas, tablas en línea, celdas de tabla, columnas de tabla y grupos de columnas no está definido.

Solo puedo suponer que esto se aplica a td y tr también.

Lo que siempre debería funcionar es envolver el contenido en un div y aplicar min-height a eso, como se muestra en este JSFiddle:

   
This is my text that I need in 2 lines

Editar: Dices que esto no funciona con Outlook.

Idea alternativa: coloque una imagen de 60 px de altura en el td , y hágala float: left :

    

Utilice

no la altura de CSS o la altura mínima

Para el correo electrónico HTML establezca su celda de la tabla como

y lo tratará como la altura mínima. Si su contenido es más de 60px, se expandirá en consecuencia.

Ponga un DIV en la celda, estilo el DIV en su lugar.

Min-height no funciona en las tablas.

A veces es útil restringir la altura de los elementos a un cierto rango. Dos propiedades ofrecen esta funcionalidad: min-height y max-height

Pero estos no se pueden usar en elementos en línea no reemplazados, columnas de tabla y grupos de columnas.

No puede establecer min-height y min-width , pero puede usar algo de CSS3 para obtener los logros del mismo efecto.

HTML:

 
Steve Smith stevesmith@gmail.com
Jone Polanski jonep@gmail.com

CSS:

 .default-table table { border-collapse: collapse; } .default-table table td { padding: 0; } .default-table tr:before { width: 0px; content: ''; float: left; overflow: hidden; height: 28px; font-size: 0; } .default-table { overflow:hidden; } 

pero si tienes colapso o relleno en td. Debe dar para la tabla .default-table menos margin-left.

HTML:

 

CSS:

 table{ height:0px; /*Set any facultative length value to Height (percentage value doesn't work)*/ min-height:100vh; } 

Así es como siempre resuelvo este problema https://stackoverflow.com/questions/8822082/how-to-force-min-height-on-table/

Agregar bloque de visualización

  

Aquí hay una solución que funciona en Outlook (probado) y otros clientes de correo electrónico:

   

Esto es más limpio que usar una imagen, lo que podría afectar negativamente su puntuación de spam, y hace exactamente lo mismo.

Si tiene otro contenido en

que no quiere que tenga esa altura de línea, puede ajustar el espacio de no separación en un y establecer el line-height en esa etiqueta:

  **Other content without 300px line-height here** 

La razón por la que height o height min-height funciona en las tags

y no

es porque

están configuradas para display:table-cell y no respetan la height la misma manera que los elementos display:block (

) .

He resuelto este problema agregando display:block; a su estilo como

  

Aquí hay una solución que no depende de la altura en píxeles. Funciona en todos los clientes de correo electrónico:

 
This is my text that I need in 2 lines

Second Line

La solución funciona agregando una columna de ancho cero con dos líneas a la derecha de la primera. Utiliza el & # xfeff; carácter, que es un espacio de ancho cero sin interrupción.

Puede estar reviviendo una publicación de 2012, para aquellos que buscaron y encontraron esta publicación como yo:

 table tr:first-child td:before { min-height: 100px; display: block; content: "" } 
 

Lo que encontré !!!, en las tablas CSS td{height:60px;} funciona igual que CSS td{height:60px;}