Understanding Display:Table-Cell; Functioning

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

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:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Similarly to get CSS to do it, you'd use the following:

HTML

<div id="table">
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
        <div class="td"></div>
    </div>
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
        <div class="td"></div>
    </div>
</div>

CSS

#table{ 
    display: table; 
}
.tr{ 
    display: table-row; 
}
.td{ 
    display: table-cell; }

As you can see in the 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!

#table {
    display: table;
    padding: 5px;
}
.tr {
    display: table-row;
    padding: 5px;
}
.td {
    display: table-cell;
    padding: 5px;
    width: 150px;
    border: #000000 solid 1px;
    margin: 5px;
}

<div id="table">
    <div class="tr">
        <div class="td">Row 1,
            <br />Column 1</div>
        <div class="td">Row 1, Column 2</div>
        <div class="td" style="background:#888888;"></div>
    </div>
    <div class="tr">
        <div class="td">Row 2,
            <br />Column 1</div>
        <div class="td">Row 2, Column 2</div>
        <div class="td" style="background:#888888;"></div>
    </div>
</div>

What is the purpose of display table-cell, table-column etc

They can be used to format content in a tabular manner when the markup does not use the table element, e.g. because the markup was written by someone who was told not use tables or because the markup is generic XML and not HTML.

You can also design a page using e.g. div elements so that some stylesheet formats them as a table, some other stylesheet lets them be block elements or turns them to inline elements. This may depend e.g. on the device width.

How is a CSS display: table-column supposed to work?

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):

<table ..>
  <col .. />
  <col .. />
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
</table>

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):

.mytable {

  display: table;

}

.myrow {

  display: table-row;

}

.mycell {

  display: table-cell;

}

.column1 {

  display: table-column;

  background-color: green;

}

.column2 {

  display: table-column;

}

<div class="mytable">

  <div class="column1"></div>

  <div class="column2"></div>

  <div class="myrow">

    <div class="mycell">contents of first cell in row 1</div>

    <div class="mycell">contents of second cell in row 1</div>

  </div>

  <div class="myrow">

    <div class="mycell">contents of first cell in row 2</div>

    <div class="mycell">contents of second cell in row 2</div>

  </div>

</div>

How are `display: table-cell` widths calculated?

This is the result of the automatic table layout algorithm as implemented by the browser. This can vary across browsers because the CSS2.1 spec doesn't specify all auto layout behavior, but it does outline an algorithm commonly used by browsers with HTML tables, because the CSS table model is based on the HTML table model for the most part.

In general, if the table doesn't have a specified width (i.e. it uses the default auto), then the cell with the percentage width is as wide as required by its contents, and no more. That calculated width (together with any other widths specified on other cells) is then used as the percentage to find the maximum width of the entire table, and the rest of the columns are resized accordingly. Note that the table can still be constrained by its containing block (in your example, it's the initial containing block established by the result pane).

On my PC running Firefox, .cell-1 has a computed width of 33 pixels. When you specify its width as 1%, the maximum width that the table will have is 3300 pixels (33 × 100 = 3300). You would need a very large screen to see this in your example, so I removed the padding which drastically reduces the width of .cell-1 to 9 pixels and thus the maximum table width to 900 pixels. If you resize the preview pane to greater than 900 pixels, you will see that the table stops growing at that point.

When you increase the width of .cell-1 to 10%, the same 33 pixels now becomes 10% of the maximum width of the table. In turn, the maximum table width becomes 330 pixels (which is in fact 10% of 3300 pixels, because 100 ÷ 10 = 10).

The moment you specify the width of .table as 100%, the table is sized according to its containing block. In your case, that just means stretching it to the full width of the result pane. .cell-1 still has to obey its width: 10% declaration, so it stretches to 10% of the width of the table since the content doesn't require anything wider. If you resize the result pane to a very narrow width, you'll see that .cell-1 shrinks along with the table, but not past its minimum content width.

Applying `display: table` and `display: table-cell` to fieldset not working in Chrome / IE Edge

In Firefox this code renders Test and Test2 side-by-side, but in Chrome and IE Edge they are stacked. Which is correct?

Based on these facts:

the row has a width: 100%,
there are two table cells, each with width: 50%,
the box model is set to box-sizing: border-box, and
margin spacing is set to 0

...it would appear that Firefox renders the layout correctly. Firefox aligns the table cells on the same row but Chrome wraps them onto two rows.

Except that fieldset is a special type of element.

fieldset doesn't accept changes to its display value like most other HTML elements. In fact, specifying display: table, display: table-cell or even display: flex to fieldset, will render elements unpredictably and unreliably.

And how can I make them side-by-side as in Firefox.

If you want to alter display values, you'll need to use elements other than fieldset or nest div / span elements as containers within fieldset.

For more details and workarounds see here:

Fieldset does not support display: table / table-cell
Arranging fieldset elements like a typical table-design
Default CSS values for a fieldset <legend>
Why do <fieldset>s clear floats?
Bug 949476 - CSS display property flex does not work on fieldset element

CSS - display: table-cell not working properly

I inspected your site and you can solve it by changing the following rules:

 @media (min-width: 981px) {    
    .home .et_pb_section_3.full-width-row .et_pb_row {
        display: flex;
        flex-flow: row nowrap; // this way they won't collapse 
    }

    .full-width-row .et_pb_module {
        height: 100%;
    }

Hope helps :)

How is the padding of display:table-cell determined

This is about vertical alignment. The default one is set to baseline and produce this output. Simply change the alignment to top on the table-cell and you won't have this issue:

<div style="display:table">

  <div style="display:table-row">

    <div style="display:table-cell;

    vertical-align: top;">

      <div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">

        Dexedrine Spansules (Dextroamphetamine, ER) <br/><span style="font-style:italic">(20mg)</span>

      </div>

      <div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">

        Methamphetamine (Desoxyn, IR) <br/><span style="font-style:italic">(15mg)</span>

      </div>

    </div>

    <div style="display:table-cell;

    vertical-align: top; overflow:hidden; max-width:800px">

      <div id="medicine_table_container_2" class="medicine-table-container" style="position:relative; left:0">

        <div style="white-space:nowrap; font-size:0px">

          <div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">

            <div>

              <div style="display:inline-block; width:70px; height:45px">

                Morning<br/>-

              </div>

              <div style="display:inline-block; width:50px; height:45px">

                Noon<br/>5mg

              </div>

            </div>

            <div>

              <div style="display:inline-block; width:70px; height:35px">

                Afternoon<br/>12mg

              </div>

              <div style="display:inline-block; width:50px; height:35px">

                Evening<br/>-

              </div>

            </div>

          </div>

        </div>

        <div style="white-space:nowrap; font-size:0px">

          <div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">

            <div>

              <div style="display:inline-block; width:70px; height:45px">

                Morning<br/>-

              </div>

              <div style="display:inline-block; width:50px; height:45px">

                Noon<br/>5mg

              </div>

            </div>

            <div>

              <div style="display:inline-block; width:70px; height:35px">

                Afternoon<br/>12mg

              </div>

              <div style="display:inline-block; width:50px; height:35px">

                Evening<br/>-

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

How table-cell width with percentage value works?

Here's the Math:

table-cell's width on 100% means that you have a table with a single cell per row. The known width - in your case - is the width of the text (89px).

If we put table-cell's width at 50%, that means the cell is wider as half of the whole table's width. We double the known width going to 178px.

Conclusion, the end width will be 100 / {table-cell's width} * {element's offsetWidth}

Why this happens is explained with the already posted link http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes