html - texto - ¿Cómo puedo obtener un div para llenar una celda de la tabla verticalmente?
tablas html avanzado (2)
Como seguimiento de esta pregunta sobre el posicionamiento absoluto dentro de una celda de tabla, estoy tratando de que algo funcione en Firefox. Una vez más, estoy cerca del 95% y solo hay una pequeña cosa que me impide declarar la victoria. Usando el siguiente marcado de muestra:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
table { width:500px; border-collapse:collapse}
th, td { border:1px solid black; vertical-align: top; }
th { width:100px; }
td { background:#ccc; }
.wrap { position:relative; height:100%; padding-bottom:1em; background:#aaa; }
.manage { text-align:right; position:absolute; bottom:0; right:0; }
p{ margin: 0 0 5px 0; }
</style>
</head>
<body >
<table>
<tr>
<th>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero.</th>
<td><div class="wrap"><p>Cras diam.</p><div class="manage">Edit | Delete</div></div></td>
</tr>
<tr>
<th>Cras diam.</th>
<td><div class="wrap"><p>Cras diam.</p><div class="manage">Edit | Delete</div></div></td>
</tr>
<tr>
<th>Cras diam.</th>
<td><div class="wrap"><p>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero. Sed elementum. Praesent porta, tellus ut dictum ullamcorper, est ante condimentum metus, non molestie lorem turpis in sapien. Aenean id enim. Nullam placerat blandit ante. Aenean ac ligula.</p><div class="manage">Edit | Delete</div></div></td>
</tr>
</table>
</body>
</html>
¿Cómo puedo obtener el wrap-div para llenar siempre la celda, de modo que el área de administración se encuentre en la parte inferior de la celda? Y sí, los datos que estoy poniendo en la tabla son (en mi opinión) tabulares, por lo que me gustaría usar una tabla aquí. Como último recurso, puedo recurrir a una solución div desagradable, pero dado que una tabla es semánticamente correcta aquí, me gustaría utilizar una si es posible. Tenga en cuenta que los colores de fondo son simplemente para mostrar los tamaños relativos de los elementos; no me importa el fondo para mi diseño. También tenga en cuenta que me gustaría que las celdas tengan una altura flexible, de modo que solo se expandan lo suficiente para ajustarse a su contenido.
¿Estás tratando de hacer que el backrground coincida con el mismo color? y no alineación, entonces puede usar una imagen de fondo en css para dar el mismo efecto, porque cosFF no representa el elemento al 100% dentro de un contenedor. Si el contenedor está configurado en altura automática, el niño también se configurará en automático. Hace que el renderizado sea más rápido.
Entonces, la mejor apuesta sería una imagen de fondo CSS.
Podrías poner (la misma) altura fija en la celda de la tabla y dividir div de esta manera:
<style type="text/css">
table { width:500px; border-collapse:collapse}
th, td { height:200px; border:1px solid black; vertical-align: top; }
th { width:100px; }
td { background:#ccc; }
.wrap { position:relative; height:200px; padding-bottom:1em; background:#aaa; }
.manage { text-align:right; position:absolute; bottom:0; right:0; }
p{ margin: 0 0 5px 0; }
</style>