How is a CSS display table-column supposed to work

Question

Given the following HTML and CSS  I see absolutely nothing in my browser  Chrome and IE latest at time of writing   Everything collapses down to 0x0 px  Why    lt  DOCTYPE html gt   lt html gt   lt head gt       lt style type  text css  gt          section   display  table  height  100   background-color  grey              colLeft   display  table-column  height  100   background-color  green             colRight   display  table-column  height  100   background-color  red              row1   display  table-row  height  100              row2   display  table-row  height  100              row3   display  table-row  height  100               cell1   display  table-cell  height  100              cell2   display  table-cell  height  100              cell3   display  table-cell  height  100          lt  style gt   lt  head gt   lt body gt       lt section gt           lt div id  colLeft  gt               lt div id  row1  gt                   lt div id  cell1  gt                      AAA                  lt  div gt               lt  div gt               lt div id  row2  gt                   lt div id  cell2  gt                      BBB                  lt  div gt               lt  div gt           lt  div gt           lt div id  colRight  gt               lt div id  row3  gt                   lt div id  cell3  gt                      CCC                  lt  div gt               lt  div gt           lt  div gt       lt  section gt   lt  body gt   lt  html gt

User · Answer

The  table-column  display type means it acts like the  lt col gt  tag in HTML - i e  an invisible element whose width  governs the width of the corresponding physical column of the enclosing table   See the W3C standard for more information about the CSS table model     And a few other properties like borders  backgrounds

User · Answer

The CSS table model is based on the HTML table model http   www w3 org TR CSS21 tables html  A table is divided into ROWS  and each row contains one or more cells  Cells are children of ROWS  they are NEVER children of columns    display  table-column  does NOT provide a mechanism for making columnar layouts  e g  newspaper pages with multiple columns  where content can flow from one column to the next    Rather   table-column  ONLY sets attributes that apply to corresponding cells within the rows of a table  E g   The background color of the first cell in each row is green  can be described   The table itself is always structured the same way it is in HTML   In HTML  observe that  td s are inside  tr s  NOT inside  col s     lt table    gt     lt col      gt     lt col      gt     lt tr    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  tr gt   lt  table gt    Corresponding HTML using CSS table properties  Note that the  column  divs do not contain any contents -- the standard does not allow for contents directly in columns     x000D   x000D   mytable   x000D    display  table  x000D    x000D   myrow   x000D    display  table-row  x000D    x000D   mycell   x000D    display  table-cell  x000D    x000D   column1   x000D    display  table-column  x000D    background-color  green  x000D    x000D   column2   x000D    display  table-column  x000D    x000D   lt div class  mytable  gt  x000D     lt div class  column1  gt  lt  div gt  x000D     lt div class  column2  gt  lt  div gt  x000D     lt div class  myrow  gt  x000D       lt div class  mycell  gt contents of first cell in row 1 lt  div gt  x000D       lt div class  mycell  gt contents of second cell in row 1 lt  div gt  x000D     lt  div gt  x000D     lt div class  myrow  gt  x000D       lt div class  mycell  gt contents of first cell in row 2 lt  div gt  x000D       lt div class  mycell  gt contents of second cell in row 2 lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D        OPTIONAL  both  rows  and  columns  can be styled by assigning multiple classes to each row and cell as follows  This approach gives maximum flexibility in specifying various sets of cells  or individual cells  to be styled    x000D   x000D    Useful css declarations  depending on what you want to affect  include  x000D   x000D     all cells  that have  class mycell      x000D   mycell   x000D    x000D   x000D     class row1  wherever it is used    x000D   row1   x000D    x000D   x000D     all the cells of row1  if you ve put  class mycell  on each cell     x000D   row1  mycell   x000D    x000D   x000D     cell1 of row1    x000D   row1  cell1   x000D    x000D   x000D     cell1 of all rows    x000D   cell1   x000D    x000D   x000D     row1 inside class mytable  so can have different tables with different styles     x000D   mytable  row1   x000D    x000D   x000D     all the cells of row1 of a mytable    x000D   mytable  row1  mycell   x000D    x000D   x000D     cell1 of row1 of a mytable    x000D   mytable  row1  cell1   x000D    x000D   x000D     cell1 of all rows of a mytable    x000D   mytable  cell1   x000D    x000D   lt div class  mytable  gt  x000D     lt div class  column1  gt  lt  div gt  x000D     lt div class  column2  gt  lt  div gt  x000D     lt div class  myrow row1  gt  x000D       lt div class  mycell cell1  gt contents of first cell in row 1 lt  div gt  x000D       lt div class  mycell cell2  gt contents of second cell in row 1 lt  div gt  x000D     lt  div gt  x000D     lt div class  myrow row2  gt  x000D       lt div class  mycell cell1  gt contents of first cell in row 2 lt  div gt  x000D       lt div class  mycell cell2  gt contents of second cell in row 2 lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    In today s flexible designs  which use  lt div gt  for multiple purposes  it is wise to put some class on each div  to help refer to it  Here  what used to be  lt tr gt  in HTML became class myrow  and  lt td gt  became class mycell  This convention is what makes the above CSS selectors useful   PERFORMANCE NOTE  putting class names on each cell  and using the above multi-class selectors  is better performance than using selectors ending with    such as  row1   or even  row1  gt     The reason is that selectors are matched last first  so when matching elements are being sought   row1   first does    which matches all elements  and then checks all the ancestors of each element  to find if any ancestor has class row1  This might be slow in a complex document on a slow device   row1  gt    is better  because only the immediate parent is examined  But it is much better still to immediately eliminate most elements  via  row1  cell1    row1  gt   cell1 is an even tighter spec  but it is the first step of the search that makes the biggest difference  so it usually isn t worth the clutter  and the extra thought process as to whether it will always be a direct child  of adding the child selector  gt     The key point to take away re performance is that the last item in a selector should be as specific as possible  and should never be

[css] How is a CSS "display: table-column" supposed to work?

The answer is

Examples related to css

Examples related to tablelayout

Examples related to css-tables

Tags