Establecer altura de celda de tabla vacía 100%

Tengo una fila de tabla que contiene 3 td s. En el medio td hay texto, por lo que tiene una cierta altura, p. 100px.Establecer altura de celda de tabla vacía 100%

Los dos td s a la izquierda y a la derecha contienen una tabla que muestra un área seleccionable (posterior) que se supone que tiene la misma altura que el medio td - así que 100px en mi ejemplo.

Desafortunadamente, solo Firefox estira la izquierda y la derecha td s al 100% de altura. Chrome, Safari e IE simplemente lo colocan en la altura mínima.

Aquí está el violín: http://jsfiddle.net/X3YAu/

He jugado un poco con la propiedad display pero no sirvió de nada. ¿El 100% de altura no se refiere al elemento principal y, en caso afirmativo, por qué no el strech td al 100% de altura del elemento principal?

Fuente

2012-08-31 Horen

¿Por qué utiliza total de vacío primera '' ? – diEcho

haga un violín con CSS esencial y HTML. – diEcho

@diEcho Sé que el html parece complicado, y lo es, pero ya intenté elegir solo lo esencial. Las cosas reales son mucho más pesadas – Horen

Poner el   en su <td></td> vacío debería ayudar.

Agregado Info:

me volvió a escribir por completo su código porque tiene una gran cantidad de etiquetas inútiles allí, esto debería funcionar:

<table align="center" width="100%" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td align="center" width="100%" height="20" colspan="3" bgcolor="#A9DBF5"> 
      <img src="http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_up.png" width="16" height="16" title="Up" alt="Arrow up" style="display:inline-block;" /> 
     </td> 
    </tr> 
    <tr> 
     <td align="center" width="22" height="100"> 
      <img src="http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_left.png" width="16" height="16" title="Left" alt="Arrow left" style="display:inline-block;padding:3px;background:#A9DBF5;" /> 
     </td> 
     <td align="left" height="100" bgcolor="#FFFFFF"> 
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
     </td> 
     <td align="center" width="22" height="100"> 
      <img src="http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_right.png" width="16" height="16" title="Right" alt="Arrow right" style="display:inline-block;padding:3px;background:#A9DBF5;" /> 
     </td> 
    </tr> 
    <tr> 
     <td align="center" width="100%" height="20" colspan="3" bgcolor="#A9DBF5"> 
      <img src="http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_down.png" width="16" height="16" title="Down" alt="Arrow down" style="display:inline-block;" /> 
     </td> 
    </tr> 
</table>

Como se ve, en lugar de utilizar vacías <td> s, i simplemente ponga uno allí con el argumento colspan="3" extienda una td completamente en tres columnas.

Aquí es una demostración: jsbin LINK

Tenga en cuenta que, yo no utilicé border-radius y border css como lo hizo, para mantener el código lo más corto posible, para que pueda obtener la idea.

Fuente

2012-08-31 10:05:49 aspirinemaga

Lo probé en el violín pero no ayudó – Horen

Aparece el td - ese no es el problema. El problema es que la altura no se ajusta al 100% ... – Horen

bien, su código no está escrito de la mejor manera, por ejemplo, tiene un montón de 'td' vacíos en su tabla, podría usar' colspan 'atributo para agrupar todos ellos en uno' td'. Estoy actualizando mi respuesta, junto con el código 'html'. – aspirinemaga

La mejor manera sería usar el modo CSS.

table { empty-cells: show; }

La forma   es una buena manera, pero es un poco de un truco.

Fuente

2012-08-31 10:18:50

Siga la guía presentada http://www.cs.tut.fi/~jkorpela/HTML/emptycells.html para obtener la mejor práctica. Como las celdas de la tabla realmente no deberían estar vacías. –

Bueno, las celdas no están realmente vacías. Hay un 'div' y un' span' adentro. El 'div 'se coloca relativo y el' span' absoluto a pesar de – Horen

¿Funciona el CSS de celdas vacías para su problema? –

no hay tal cosa como height: 100%.

Un elemento no puede llenar su altura padres simplemente pasando height: 100%, las soluciones para añadir   o table {empty-cells: show;} debe hacer el truco, pero sin una altura específica que nunca se produce la deseada efecto.

Fuente

2012-09-14 10:59:26 Mark

hmm - ¿cómo es que funciona en Firefox entonces? – Horen

Firefox maneja las cosas a la inversa, como Chrome, Safari u Opera e Internet Explorer sí. no lo haga referencia si FF lo hace, y el resto de navegadores no lo hacen. como dije: no hay tal altura: 100%. – Mark

¿cómo es que funciona en Chrome cuando se configura '.ghost.column' en' display: inline-block; '? http://jsfiddle.net/X3YAu/10/ – Horen

¿Está bien usar jQuery en su solución? Si es así, se puede poner lo siguiente en una función y llamar a la carga, y cada vez que cambia el tamaño de la tabla (si se cambia el tamaño)

$('.ghost.column table').height($('.ghost.column').height())

También se preguntan si el uso de tablas es el mejor enfoque para su objetivo? ¿Hay alguna razón para esto o podría intentarse usar elementos <div>?

Demostración de Trabajo: http://jsfiddle.net/X3YAu/14/

Fuente

2012-09-14 12:33:25 JDandChips

he encontrado esta respuesta en another thread y funcionó.No hay necesidad de poner espacios adicionales para las celdas en blanco de esta manera.

td a { 
    display: inline-block; 
    height:100%; 
    width:100%; 
}

Fuente

2013-05-28 17:22:54 Fiona

Otro truco es usar el :after pseudo-elemento:

td.empty:after { 
    content: 'Empty cell'; 
    visibility: hidden; 
    speak: none; 
}

Esto debería funcionar en cualquier navegador (probado en Chrome en Windows 7) y le ahorra una gran cantidad de   y separa una mejor presentación de la lógica.

Fuente

2014-06-17 13:56:59

Sólo se necesita:

table { empty-cells: show; 
min-width: 130px; //example. 
}

Eso es todo y funcionó para mí

Fuente

2016-03-28 15:05:34 LagMaster

Establecer altura de celda de tabla vacía 100%

Respuesta

Cuestiones relacionadas