css - sirve - Haga que un DIV complete una celda de tabla completa
tablas en html ejemplos (19)
He visto esta pregunta y busqué en Google un poco , pero hasta ahora nada ha funcionado. Me imagino que es 2010 ahora (esas preguntas / respuestas son viejas y, bueno, sin respuesta) ¡y tenemos CSS3! ¿Hay alguna forma de obtener un div para llenar el ancho y alto de una celda de una tabla usando CSS?
No sé cuál será el ancho y / o la altura de la celda antes de tiempo, y establecer el ancho y la altura del div en 100% no funciona.
Además, la razón por la que necesito el div es porque necesito ubicar absolutamente algunos elementos fuera de la celda, y position: relative no se aplica a td s, entonces necesito un envoltorio div.
Como todos los demás navegadores (incluidos IE 7, 8 y 9) manejan la position:relative en una celda de la tabla de forma correcta y solo Firefox se equivoca, lo mejor es usar una corrección de JavaScript. No debería tener que modificar su DOM para un navegador fallido. La gente usa calzas todo el tiempo cuando IE hace algo mal y todos los otros navegadores lo hacen bien.
Aquí hay un fragmento con todo el código anotado. JavaScript, HTML y CSS usan prácticas de diseño web receptivas en mi ejemplo, pero no es necesario si no lo desea. (Responsive significa que se adapta al ancho de su navegador).
http://jsfiddle.net/mrbinky3000/MfWuV/33/
Aquí está el código en sí, pero no tiene sentido sin el contexto, así que visite la URL jsfiddle arriba. (El fragmento completo también tiene muchos comentarios tanto en CSS como en Javascript).
$(function() {
// FireFox Shim
if ($.browser.mozilla) {
$(''#test'').wrapInner(''<div class="ffpad"></div>'');
function ffpad() {
var $ffpad = $(''.ffpad''),
$parent = $(''.ffpad'').parent(),
w, h;
$ffpad.height(0);
if ($parent.css(''display'') == ''table-cell'') {
h = $parent.outerHeight();
$ffpad.height(h);
}
}
$(window).on(''resize'', function() {
ffpad();
});
ffpad();
}
});
Creo que la mejor solución sería usar JavaScript.
Pero no estoy seguro de que deba hacer esto para resolver su problema de posicionamiento de elementos en <td> fuera de la celda. Para eso podrías hacer algo como esto:
<div style="position:relative">
<table>
<tr>
<td>
<div style="position:absolute;bottom:-100px">hello world</div>
</td>
</tr>
</table>
</div>
No en línea, por supuesto, pero con clases e ids.
El siguiente código funciona en IE 8, modo de compatibilidad IE 7 de IE 8 y Chrome (no probado en otro lugar):
<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
<tr><td>test</td><td>test</td></tr>
<tr>
<td style="padding:0;">
<div style="height:100%; width:100%; background-color:#abc; position:relative;">
<img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
test of really long content that causes the height of the cell to increase dynamically
</div>
</td>
<td>test</td>
</tr>
</table>
En su pregunta original, dijo que establecer el width y height al 100% no funcionaba, lo que me hace sospechar que hay alguna otra regla que lo anula. ¿Revisaste el estilo calculado en Chrome o Firebug para ver si realmente se aplicaban las reglas de ancho / alto?
Editar
¡Qué tonto soy! El div estaba dimensionado para el texto, no para el td . Puede solucionar esto en Chrome haciendo que la display:inline-block div display:inline-block , pero no funciona en IE. Eso está resultando más complicado ...
Esta es mi solución para ampliar el 100% de altura y el 100% de ancho en un html <td>
si borras la primera línea de tu código, puedes arreglarlo ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
porque este doctype no permite en algunos archivos usar el 100% por ciento dentro de <td> , pero si borras esta línea, el cuerpo falla al expandir el fondo al 100% de altura y al 100% de ancho, así que encontré este DOCTYPE que resuelve el problema
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
este DOCTYPE le permite extender el fondo de su cuerpo como 100% de altura y 100% de ancho, y le permite tomar todas las alturas del 100% y el 100% de ancho en el <td>
Finalmente, no encontré nada que funcionara en todos mis navegadores y todos los modos de representación de DocTypes / browser, excepto el uso de jQuery. Así que aquí es lo que se me ocurrió.
Incluso toma rowspan en cuenta.
function InitDivHeights() {
var spacing = 10; // <-- Tune this value to match your tr/td spacing and padding.
var rows = $(''#MyTable tr'');
var heights = [];
for (var i = 0; i < rows.length; i++)
heights[i] = $(rows[i]).height();
for (var i = 0; i < rows.length; i++) {
var row = $(rows[i]);
var cells = $(''td'', row);
for (var j = 0; j < cells.length; j++) {
var cell = $(cells[j]);
var rowspan = cell.attr(''rowspan'') || 1;
var newHeight = 0;
for (var k = 0; (k < rowspan && i + k < heights.length); k++)
newHeight += heights[i + k];
$(''div'', cell).height(newHeight - spacing);
}
}
}
$(document).ready(InitDivHeights);
Probado en IE11 (modo Edge), FF42, Chrome44 +. No probado con tablas anidadas.
Intenta poner pantalla: bloque de tabla dentro de una celda
Lo siguiente debería funcionar Debe establecer una altura para la celda principal. https://jsfiddle.net/nrvd3vgd/
<table style="width:200px; border: 1px solid #000;">
<tr>
<td style="height:100px;"></td>
</tr>
<tr>
<td style="height:200px;">
<div style="height:100%; background: #f00;"></div>
</td>
</tr>
</table>
Me encuentro con problemas similares con frecuencia y siempre uso table-layout: fixed; en el elemento y la height: 100%; la table height: 100%; en el div interno.
No estoy seguro de lo que quieres hacer, pero puedes probar este:
<td width="661" valign="top"><div>Content for New Div Tag Goes Here</div></td>
No veo aquí un viejo truco de CSS para < div > dentro de < td >. Por lo tanto, les recuerdo: simple, establezca un valor mínimo para el ancho , pero lo que necesita es min-width . Por ejemplo:
<div style="width: 3px; min-width: 99%;">
El ancho del td , en ese caso, depende de usted.
Ok, nadie mencionó esto, así que pensé que publicaría este truco:
.tablecell {
display:table-cell;
}
.tablecell div {
width:100%;
height:100%;
overflow:auto;
}
overflow: auto en ese contenedor div dentro de la celda me funciona. Sin él, el div no usa toda la altura.
Para aumentar la altura: 100% de trabajo para el div interno, debe establecer una altura para el td principal. Para mi caso particular funcionó usando altura: 100%. Esto hizo que la altura div interior se estirara, mientras que los otros elementos de la tabla no permitieron que la td se volviera demasiado grande. Por supuesto, puede usar otros valores que no sean 100%
Si también desea que la celda de la tabla tenga una altura fija para que no se agrande en función del contenido (para hacer que el div interior se desplace u oculte el desbordamiento), entonces no tendrá más remedio que hacer algunos trucos js. El td padre deberá tener la altura especificada en una unidad no relativa (no%). Y lo más probable es que no tenga más remedio que calcular esa altura utilizando js. Esto también necesitaría el diseño de la tabla: estilo fijo establecido para el elemento de la tabla
Propongo una solución usando el experimental Flexbox para simular un diseño de tabla que permitirá que el elemento de contenido de una celda llene su celda padre verticalmente:
Manifestación
.table{ display:flex; border:2px solid red; }
.table > *{ flex: 1; border:2px solid blue; position:relative; }
.fill{ background:lightgreen; height:100%; position:absolute; left:0; right:0; }
/* Reset */
*{ padding:0; margin:0; }
body{ padding:10px; }
<div class=''table''>
<aside><div class=''fill''>Green should be 100% height</div></aside>
<aside></aside>
<aside>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus conguet.</p>
</aside>
</div>
Prueba esto:
<td style="position:relative;">
<div style="position:absolute;top:0;bottom:0;width:100%;"></div>
</td>
Si tu razón para querer un div 100% dentro de una celda de la tabla era poder tener un color de fondo que se extendiera a la altura completa pero aún así poder tener espacio entre las celdas, podrías darle al <td> el color de fondo y utilice la propiedad de espacio entre bordes de CSS para crear el margen entre las celdas.
Sin embargo, si realmente necesita un div 100% alto, como otros mencionaron aquí, debe asignar una altura fija a la <table> o usar Javascript.
Tuve que establecer una altura falsa para el <tr> y la altura: heredar para <td>s
tr tiene height: 1px (se ignora de todos modos)
A continuación, establezca la height: inherit td height: inherit
A continuación, configure el div en height: 100%
Esto funcionó para mí en IE edge y Chrome:
<table style="width:200px;">
<tr style="height: 1px;">
<td style="height: inherit; border: 1px solid #000; width: 100px;">
<div>
Something big with multi lines and makes table bigger
</div>
</td>
<td style="height: inherit; border: 1px solid #000; width: 100px;">
<div style="background-color: red; height: 100%;">
full-height div
</div>
</td>
</tr>
</table>
después de varios días de búsqueda, descubrí una posible solución para este problema.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<body style="height:100%">
<!-- for Firefox and Chrome compatibility set height:100% in the containing TABLE, the TR parent and the TD itself. -->
<table width="400" border="1" cellspacing="0" cellpadding="0" style="height:100%;">
<tr>
<td>whatever</td>
<td>whatever</td>
<td>whatever</td>
</tr>
<tr style="height:100%;">
<td>whatever dynamic height<br /><br /><br />more content
</td>
<td>whatever</td>
<!-- display,background-color and radius properties in TD BELOW could be placed in an <!--[if IE]> commentary If desired.
This way TD would remain as display:table-cell; in FF and Chrome and would keep working correctly.
If you don''t place the properties in IE commentary it will still work in FF and Chorme with a TD display:block;
The Trick for IE is setting the cell to display:block; Setting radius is only an example of whay you may want a DIV 100%height inside a Cell.
-->
<td style="height:100%; width:100%; display:block; background-color:#3C3;border-radius: 0px 0px 1em 0px;">
<div style="width:100%;height:100%;background-color:#3C3;-webkit-border-radius: 0px 0px 0.6em 0px;border-radius: 0px 0px 0.6em 0px;">
Content inside DIV TAG
</div>
</td>
</tr>
</table>
</body>
</html>
Lengua española: El truco es establecer la Tabla, el TR y el TD una altura: 100%. Esto lo hace compatible con FireFox y Chrome. Internet Explorer ignora eso, por lo que ponemos la etiqueta TD como bloque. De esta forma Explorer sí toma la altura máxima.
Explicación en inglés: dentro de los comentarios del código
div height = 100% en la celda de la tabla solo funcionará cuando la tabla tenga el atributo height.
<table border="1" style="height:300px; width: 100px;">
<tr><td>cell1</td><td>cell2</td></tr>
<tr>
<td>
<div style="height: 100%; width: 100%; background-color:pink;"></div>
</td>
<td>long text long text long text long text long text long text</td>
</tr>
</table>
UPD en FireFox también debe establecer height=100% value para el elemento TD principal
if <table> <tr> <td> <div> tienen height: 100%; establecer, entonces el div llenará la altura de la celda dinámica en todos los navegadores.