How and why to use display table-cell CSS

Question

I have a site with a very active background  I m talking 6 or so different z-indexes here 2 with animations   I wanted a  in the foreground that had content but wanted a  window  through to the background in it  Some problems I had    you can t  punch a hole  in a background  so      I built a containing div  lets call it  srminfo  Inside that I had a  top    left    window    right  and  bottom  the top  left  right  bottom all had opaque white backgrounds while the srminfo and window divs had background none   No matter how hard I tried  the  right  div wouldn t fill the space between the  top  and  bottom  divs  I tried a lot of different things  The reason it had to be dynamic is that the text in the  left  div was dynamic based on the background colour  which was itself generated randomly with JavaScript    How is display  table  and all the other related CSS code like tables  And how can it be used

User · Answer

How  and why  to use display  table-cell  CSS    I just wanted to mention  since I don t think any of the other answers did directly  that the answer to  why  is  there is no good reason  and you should probably never do this   In my over a decade of experience in web development  I can t think of a single time I would have been better served to have a bunch of  lt div gt s with display styles than to just have table elements   The only hypothetical I could come up with is if you have tabular data stored in some sort of non-HTML-table format  eg  a CSV file    In a very specific version of this case it might be easier to just add  lt div gt  tags around everything and then add descendent-based styles  instead of adding actual table tags   But that s an extremely contrived example  and in all real cases I know of simply using table tags would be better

User · Answer

It s even easier to use parent   child selector relationship so the inner div do not need to have their css classes to be defined explicitly    x000D   x000D   display-table   x000D      display  table   x000D    x000D   display-table  gt  div    x000D      display  table-row   x000D    x000D   display-table  gt  div  gt  div    x000D      display  table-cell  x000D      padding  5px  x000D    x000D   lt div class  display-table  gt  x000D       lt div gt  x000D           lt div gt 0  0 lt  div gt  x000D           lt div gt 0  1 lt  div gt  x000D       lt  div gt  x000D       lt div gt  x000D           lt div gt 1  0 lt  div gt  x000D           lt div gt 1  1 lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The display table family of CSS properties is mostly there so that HTML tables can be defined in terms of them  Because they re so intimately linked to a specific tag structure  they don t see much use beyond that   If you were going to use these properties in your page  you would need a tag structure that closely mimicked that of tables  even though you weren t actually using the  lt table gt  family of tags  A minimal version would be a single container element  display table   with direct children that can all be represented as rows  display table-row   which themselves have direct children that can all be represented as cells  display table-cell   There are other properties that let you mimic other tags in the table family  but they require analogous structures in the HTML  Without this  it s going to be very hard  if not impossible  to make good use of these properties

User · Answer

After days trying to find the answer  I finally found      display  table    There was surprisingly very little information available online about how to actually getting it to work  even here  so on to the  How    To use this fantastic piece of code  you need to think back to when tables were the only real way to structure HTML  namely the syntax  To get a table with 2 rows and 3 columns  you d have to do the following    lt table gt       lt tr gt           lt td gt  lt  td gt           lt td gt  lt  td gt           lt td gt  lt  td gt       lt  tr gt       lt tr gt           lt td gt  lt  td gt           lt td gt  lt  td gt           lt td gt  lt  td gt       lt  tr gt   lt  table gt    Similarly to get CSS to do it  you d use the following   HTML   lt div id  table  gt       lt div class  tr  gt           lt div class  td  gt  lt  div gt           lt div class  td  gt  lt  div gt           lt div class  td  gt  lt  div gt       lt  div gt       lt div class  tr  gt           lt div class  td  gt  lt  div gt           lt div class  td  gt  lt  div gt           lt div class  td  gt  lt  div gt       lt  div gt   lt  div gt    CSS   table       display  table      tr       display  table-row      td       display  table-cell      As you can see in the JSFiddle example below  the divs in the 3rd column have no content  yet are respecting the auto height set by the text in the first 2 columns  WIN   http   jsfiddle net blyzz 1djs97yv 1   It s worth noting that display  table  does not work in IE6 or 7  thanks   FelipeAls   so depending on your needs with regards to browser compatibility  this may not be the answer that you are seeking

[html] How (and why) to use display: table-cell (CSS)

Examples related to html

Examples related to css

Examples related to css-tables