Make a DIV fill an entire table cell
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?
Edit
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...
How do I make a div fill an entire table cell?
have you tried changing css to:
#centerCell{
border: 1px solid black;
height:100%;
}
seems to work for me on edge, firefox and chrome
Make div height 100% in a table cell
If you only need the background color to cover the entire cell, you can just set it on the td
rather than div
.
td:last-child {
background-color: green;
}
If you really need to make the div
to cover the cell, you can try using the position
tricks. Note, this approach only works when there is less data in the second cell.
td {
position: relative;
}
td:last-child div {
background-color: green;
width:100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
jsFiddle
Make a div fill up the entire width and height of a table cell with unspecified dimensions
After trying many things it seems that as of 2020 stretching a div
to fill all the available space of a table cell without JavaScript is not possible unless you use absolute/relative positioning.
The downside with absolute positioning is that the cell does not expand with the content inside it and even not expanded the table cell seems to break on mobile ( tested with an iphoneXS on IOS14 )
dev-sbx.github.io/x
The only real solution here seems to be using a CSS Grid layout opposed to an HTML table.
How to set 100% height of div inside table cell
Demo - codepen
Here's another relevant SO answer
It appears you need to add a height to the <table>
tag.
<table style="border-collapse: collapse; height:100%">
height: 100% for div inside div with display: table-cell
When you use %
for setting heights or widths, always set the widths/heights of parent elements as well:
.table { display: table; height: 100%;}
.cell { border: 2px solid black; vertical-align: top; display: table-cell; height: 100%;}
.container { height: 100%; border: 2px solid green; -moz-box-sizing: border-box;}
<div class="table"> <div class="cell"> <p>Text <p>Text <p>Text <p>Text <p>Text <p>Text <p>Text <p>Text </div> <div class="cell"> <div class="container">Text</div> </div></div>
Forcing table inside table-cell div to be fill 100% width
Set the body display
to table
, make it 100% wide. Use this CSS:
body {
display: table;
width: calc(100% - 16px); /* 8px margin either side */
}
JSFiddle: http://jsfiddle.net/gL7aar9h/1/
Alternatively:
body {
display: table;
width: 100%;
margin: 0;
}
JSFiddle: http://jsfiddle.net/gL7aar9h/2/
Source: Why is width: 100% not working on div {display: table-cell}?
Related Topics
Reduce Spacing Between Bootstrap Horizontal Form Controls
Css Customized Scroll Bar in Div
Transitions on the CSS Display Property
Why Does Applying a Css-Filter on the Parent Break the Child Positioning
How to Remove the Border Highlight on an Input Text Element
How to Set the Stacking Order of Pseudo-Elements Below Their Parent Element
Css Transition Effect Makes Image Blurry/Moves Image 1Px, in Chrome
Hide Text Node in Element, But Not Children
Error: Css: Background:/Is an Incorrect Operator
How to Align a ≪Div≫ to the Middle (Horizontally/Width) of the Page
What Does a Space Mean in a CSS Selector? I.E. Difference Between .Classa.Classb and .Classa .Classb
Can CSS Detect the Number of Children an Element Has
Z-Index Not Working With Fixed Positioning
How to Use Jsf Generated HTML Element Id With Colon ":" in CSS Selectors
How to Set Bullet Colors in Ul/Li HTML Lists Via CSS Without Using Any Images or Span Tags
Column Order Manipulation Using Col-Lg-Push and Col-Lg-Pull in Twitter Bootstrap 3