I've seen this question and googled a bit, but nothing so far has worked. I figure it's 2010 now (those questions/answers are old and, well, unanswered) and we have CSS3! Is there any way to get a div to fill an entire table cell's width and height using CSS?
I don't know what the width and/or height of the cell will be ahead of time, and setting the div's width and height to 100% does not work.
Also, the reason I need the div is because I need to absolutely position some elements outside of the cell, and position: relative does not apply to tds, so I need a wrapper div.
This question is related to
css
The following code works on IE 8, IE 8's IE 7 compatibility mode, and Chrome (not tested elsewhere):
<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>
You said in your original question that setting width and height to 100% didn't work, though, which makes me suspect that there is some other rule overriding it. Did you check the computed style in Chrome or Firebug to see if the width/height rules were really being applied?
How foolish I am! The div was sizing to the text, not to the td. You can fix this on Chrome by making the div display:inline-block, but it doesn't work on IE. That's proving trickier...
If the table cell is the size that you want, just add this css class and assign it to your div:
.block {
height: -webkit-calc(100vh);
height: -moz-calc(100vh);
height: calc(100vh);
width: 100%;
}
If you want the table cell to fill up the parent too, assign the class to table cell too. I hope it helps.
This is my Solution for extend 100% height and 100% width in a html <td>
if you delete the first line in your code you can fix it ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
because this doctype does not permit in some files to use the 100% percent inside of <td>, but if you delete this line, the body fails expanding the background to 100% height and 100% width, so I found this DOCTYPE that solves the problem
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
this DOCTYPE let you extends the background in your body as 100% height and 100% width, and let you take all the 100% height and 100% width into the <td>
div height=100% in table cell will work only when table has height attribute itself.
<table border="1" style="height:300px; width: 100px;">
<tr><td>cell1</td><td>cell2</td></tr>
<tr>
<td style="height: 100%">
<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 in FireFox you should also set height=100% value to the parent TD element
if <table> <tr> <td> <div> all have height: 100%; set, then the div will fill the dynamic cell height in all browsers.
I'm not sure what you want to do but you might try this one:
<td width="661" valign="top"><div>Content for New Div Tag Goes Here</div></td>
To make height:100% work for the inner div, you have to set a height for the parent td. For my particular case it worked using height:100%. This made the inner div height stretch, while the other elements of the table didn't allow the td to become too big. You can of course use other values than 100%
If you want to also make the table cell have a fixed height so that it does not get bigger based on content (to make the inner div scroll or hide overflow), that is when you have no choice but do some js tricks. The parent td will need to have the height specified in a non relative unit (not %). And you will most probably have no choice but to calculate that height using js. This would also need the table-layout:fixed style set for the table element
I propose a solution using the experimental Flexbox to simulate a table layout which will allow a cell's content element to fill up its parent cell vertically:
.table{ display:flex; border:2px solid red; }_x000D_
.table > *{ flex: 1; border:2px solid blue; position:relative; }_x000D_
.fill{ background:lightgreen; height:100%; position:absolute; left:0; right:0; }_x000D_
_x000D_
/* Reset */_x000D_
*{ padding:0; margin:0; }_x000D_
body{ padding:10px; }<div class='table'>_x000D_
<aside><div class='fill'>Green should be 100% height</div></aside>_x000D_
<aside></aside>_x000D_
<aside>_x000D_
<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>_x000D_
</aside>_x000D_
</div>I ultimately found nothing that would work across all my browsers and all DocTypes / browser rendering modes, except for using jQuery. So here is what I came up with.
It even takes rowspan into account.
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);
Tested in IE11 (Edge mode), FF42, Chrome44+. Not tested with nested tables.
If the positioned element and its father element do not have width and height, then set
padding: 0;
in its father element,
I think that the best solution would be to use JavaScript.
But I'm not sure that you need to do this to solve your problem of positioning elements in the <td> outside of the cell. For that you could do something like this:
<div style="position:relative">
<table>
<tr>
<td>
<div style="position:absolute;bottom:-100px">hello world</div>
</td>
</tr>
</table>
</div>
Not inline of course, but with classes and ids.
The following should work. You have to set a height to the parent cell. 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>
you can do it like that:
<td>
<div style="width: 100%; position: relative; float: left;">inner div</div>
</td>
Ok nobody mentioned this so I figured I would post this trick:
.tablecell {
display:table-cell;
}
.tablecell div {
width:100%;
height:100%;
overflow:auto;
}
overflow:auto on that container div within the cell does the trick for me. Without it the div does not use the entire height.
So, because everyone is posting their solution and none was good for me, here is mine (tested on Chrome & Firefox).
table { height: 1px; } /* Will be ignored, don't worry. */
tr { height: 100%; }
td { height: 100%; }
td > div { height: 100%; }
Fiddle: https://jsfiddle.net/nh6g5fzv/
--
Edit: one thing you might want to note, if you want to apply a padding to the div in the td, you must add box-sizing: border-box; because of height: 100%.
This is probably not recommended.
I figured out a workaround which works if your div doesn't contain text and has an uniform background.
display: 'list-item'
gives the div the desired height and width, but with the big downside of having a list item bullet. Since the div has a homogeneous background-color I got rid of the bullet with those styles:
list-style-position: 'inside',
color: *background-color*,
Try this:
<td style="position:relative;">
<div style="position:absolute;top:0;bottom:0;width:100%;"></div>
</td>
Because I do not have enough reputation to post a comment, I want to add a complete cross-browser solution that combined @Madeorsk and @Saadat's approaches with some slight modification! (Tested on Chrome, Firefox, Safari, IE, and Edge as of 2/10/2020)
table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div {
height: -webkit-calc(100vh);
height: -moz-calc(100vh);
height: calc(100%);
width: 100%;
background: pink; // This will show that it works!
}
However, if you're like me, than you want to control vertical alignment as well, and in those cases, I like to use flexbox:
td > div {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
I encounter similar issues frequently and always just use table-layout: fixed; on the table element and height: 100%; on the inner div.
I does not watch here an old CSS-trick for <div> inside <td>. Hence I remind: simple set some minimal value for width, but what-you-need for min-width. For example:
<div style="width: 3px; min-width: 99%;">
The td's width, in that case, is up to you.
after several days searching I figured out a possible fix for this issue.
<!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>
Spanish language: El truco es establecer la Tabla, el TR y el TD a height:100%. Esto lo hace compatible con FireFox y Chrome. Internet Explorer ignora eso, por lo que ponemos la etiqueta TD como block. De esta forma Explorer sí toma la altura máxima.
English explanation: within the code commentaries
Try putting display:table block inside a cell
I had to set a fake height to the <tr> and height: inherit for <td>s
tr has height: 1px (it's ignored anyway)
Then set the td height: inherit
Then set the div to height: 100%
This worked for me in IE edge and 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>a bit late to the party but here's my solution:
<td style="padding: 0; position: relative;">
<div style="width: 100%; height: 100%; position: absolute; overflow: auto;">
AaaaaaaaaaaaaaaaaaBBBBBBBbbbbbbbCCCCCCCCCccccc<br>
DDDDDDDddddEEEEEEEEdddfffffffffgggggggggggggggggggg
</div>
</td>
Since every other browser (including IE 7, 8 and 9) handles position:relative on a table cell correctly and only Firefox gets it wrong, your best bet is to use a JavaScript shim. You shouldn’t have to alter your DOM for one failed browser. People use shims all the time when IE gets something wrong and all the other browsers get it right.
Here is a snippet with all the code annotated. The JavaScript, HTML and CSS use responsive web design practices in my example, but you don’t have to if you don’t want. (Responsive means it adapts to your browser width.)
http://jsfiddle.net/mrbinky3000/MfWuV/33/
Here is the code itself, but it doesn’t make sense without the context, so visit the jsfiddle URL above. (The full snippet also has plenty of comments in both the CSS and the 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();
}
});
If your reason for wanting a 100% div inside a table cell was to be able to have a background color extend to the full height but still be able to have spacing between the cells, you could give the <td> itself the background color and use the CSS border-spacing property to create the margin between the cells.
If you truly need a 100% height div, however, then as others here have mentioned you need to either assign a fixed height to the <table> or use Javascript.
Source: Stackoverflow.com