Make a DIV fill an entire table cell

Question

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

User · Answer

So  because everyone is posting their solution and none was good for me  here is mine  tested on Chrome  amp  Firefox   table   height  1px       Will be ignored  don t worry     tr   height  100     td   height  100     td  gt  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

User · Answer

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      lt -- Tune this value to match your tr td spacing and padding      var rows       MyTable tr        var heights           for  var i   0  i  lt  rows length  i            heights i      rows i   height        for  var i   0  i  lt  rows length  i              var row     rows i            var cells      td   row           for  var j   0  j  lt  cells length  j                  var cell     cells j                var rowspan   cell attr  rowspan      1              var newHeight   0              for  var k   0   k  lt  rowspan  amp  amp  i   k  lt  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

User · Answer

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   lt div class  ffpad  gt  lt  div gt             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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

This is my Solution for extend 100  height and 100  width in a html  lt td gt    if you delete the first line in your code you can fix it       lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN    http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt    because this doctype does not permit in some files to use the 100  percent inside of  lt td gt   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   lt  DOCTYPE html PUBLIC  -  IETF  DTD HTML 2 0  EN  gt    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  lt td gt

User · Answer

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  lt td gt  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  lt table gt  or use Javascript

User · Answer

I encounter similar issues frequently and always just use table-layout  fixed  on the table element and height  100   on the inner div

User · Answer

I had to set a fake height to the  lt tr gt  and height  inherit for  lt td gt 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   x000D   x000D   lt table style  width 200px   gt       lt tr style  height  1px   gt           lt td style  height  inherit  border  1px solid  000  width  100px   gt               lt div gt                Something big with multi lines and makes table bigger              lt  div gt           lt  td gt           lt td style  height  inherit  border  1px solid  000  width  100px   gt               lt div style  background-color  red  height  100    gt                  full-height div              lt  div gt           lt  td gt       lt  tr gt   lt  table gt  x000D   x000D   x000D

User · Answer

I does not watch here an old CSS-trick for  lt div  inside  lt td   Hence I remind  simple set some minimal value for width  but what-you-need for min-width  For example    lt div style  width  3px  min-width  99    gt    The td s width  in that case  is up to you

User · Answer

If the positioned element and its father element do not have width and height  then set   padding  0    in its father element

User · Answer

you can do it like that    lt td gt     lt div style  width  100   position  relative  float  left   gt inner div lt  div gt   lt  td gt

User · Answer

div height 100  in table cell will work only when table has height attribute itself   x000D   x000D   lt table border  1  style  height 300px  width  100px   gt    lt tr gt  lt td gt cell1 lt  td gt  lt td gt cell2 lt  td gt  lt  tr gt    lt tr gt      lt td style  height  100   gt        lt div style  height  100   width  100   background-color pink   gt  lt  div gt      lt  td gt      lt td gt long text long text long text long text long text long text lt  td gt    lt  tr gt   lt  table gt  x000D   x000D   x000D   UPD in FireFox you should also set height 100  value to the parent TD element

User · Answer

The following should work  You have to set a height to the parent cell  https   jsfiddle net nrvd3vgd    lt table style  width 200px  border  1px solid  000   gt       lt tr gt           lt td style  height 100px   gt  lt  td gt       lt  tr gt       lt tr gt           lt td style  height 200px   gt               lt div style  height 100   background   f00   gt  lt  div gt           lt  td gt       lt  tr gt   lt  table gt

User · Answer

I m not sure what you want to do but you might try this one     lt td width  661  valign  top  gt  lt div gt Content for New Div Tag Goes Here lt  div gt  lt  td gt

User · Answer

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  gt  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  gt  div       width  100       display  flex      align-items  center      justify-content  flex-end

User · Answer

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   Demo   x000D   x000D   table  display flex  border 2px solid red    x000D   table  gt     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    x000D   lt div class  table  gt  x000D     lt aside gt  lt div class  fill  gt Green should be 100  height lt  div gt  lt  aside gt  x000D     lt aside gt  lt  aside gt  x000D     lt aside gt  x000D       lt p gt 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  lt  p gt  x000D     lt  aside gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

after several days searching I figured out a possible fix for this issue     lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset iso-8859-1    gt   lt title gt Documento sin t  tulo lt  title gt   lt  head gt    lt body style  height 100   gt   lt  -- for Firefox and Chrome compatibility set height 100  in the containing TABLE  the TR parent and the TD itself  -- gt   lt table width  400  border  1  cellspacing  0  cellpadding  0  style  height 100    gt       lt tr gt       lt td gt whatever lt  td gt       lt td gt whatever lt  td gt       lt td gt whatever lt  td gt     lt  tr gt     lt tr style  height 100    gt       lt td gt whatever dynamic height lt br   gt  lt br   gt  lt br   gt more content  lt  td gt       lt td gt whatever lt  td gt        lt  -- display background-color and radius properties in TD BELOW could be placed in an  lt  -- if IE  gt  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      -- gt        lt td style  height 100   width 100   display block  background-color  3C3 border-radius  0px 0px 1em 0px   gt        lt div style  width 100  height 100  background-color  3C3 -webkit-border-radius  0px 0px 0 6em 0px border-radius  0px 0px 0 6em 0px   gt      Content inside DIV TAG      lt  div gt        lt  td gt     lt  tr gt   lt  table gt   lt  body gt   lt  html gt    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

User · Answer

a bit late to the party but here s my solution    lt td style  padding  0  position  relative   gt      lt div style  width  100   height  100   position  absolute  overflow  auto   gt       AaaaaaaaaaaaaaaaaaBBBBBBBbbbbbbbCCCCCCCCCccccc lt br gt       DDDDDDDddddEEEEEEEEdddfffffffffgggggggggggggggggggg     lt  div gt   lt  td gt

User · Answer

The following code works on IE 8  IE 8 s IE 7 compatibility mode  and Chrome  not tested elsewhere     lt table style  width 100px  gt   lt  -- Not actually necessary  just makes the example text shorter -- gt      lt tr gt  lt td gt test lt  td gt  lt td gt test lt  td gt  lt  tr gt      lt tr gt         lt td style  padding 0   gt            lt div style  height 100   width 100   background-color  abc  position relative   gt               lt img style  left 90px  position absolute   src     Content Images attachment png   gt              test of really long content that causes the height of the cell to increase dynamically           lt  div gt         lt  td gt         lt td gt test lt  td gt      lt  tr gt   lt  table gt    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

User · Answer

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  lt td gt  outside of the cell  For that you could do something like this    lt div style  position relative  gt       lt table gt           lt tr gt               lt td gt                   lt div style  position absolute bottom -100px  gt hello world lt  div gt               lt  td gt           lt  tr gt       lt  table gt   lt  div gt    Not inline of course  but with classes and ids

User · Answer

if  lt table gt   lt tr gt   lt td gt   lt div gt  all have height  100   set  then the div will fill the dynamic cell height in all browsers

User · Answer

Try putting display table block inside a cell

User · Answer

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

User · Answer

Try this    lt td style  position relative   gt       lt div style  position absolute top 0 bottom 0 width 100    gt  lt  div gt   lt  td gt

[css] Make a DIV fill an entire table cell

Examples related to css