Adam Fraser Adam Fraser - 5 months ago 14
HTML Question

Flexbox on table doesn't work in Firefox

Using flexbox to control the layout of a table works in webkit browsers but in Firefox,

<td>
s only render as wide as their own content.

Demonstration:
http://codepen.io/afraser/pen/wMgbzr?editors=010



* {
box-sizing: border-box;
}
table {
border: 1px solid #ddd;
width: 100%;
}
tbody {
background: #fff;
}
tr {
display: flex;
}
td:first-child {
flex: 1 1 80%;
background: mistyrose;
}
td:nth-child(2) {
flex: 0 0 10%;
background: Aquamarine;
}
td:nth-child(3) {
flex: 0 0 10%;
background: pink;
}

<table>
<tbody>
<tr>
<td>Ted</td>
<td>1</td>
<td>100%</td>
</tr>
<tr>
<td>Turd Ferguson</td>
<td>2</td>
<td>65%</td>
</tr>
<tr>
<td>Hingle McKringleberry</td>
<td>3</td>
<td>99%</td>
</tr>
</tbody>
</table>





I tried several variations on this including:


  • Using
    flex-grow
    ,
    flex-shrink
    , and
    flex-basis
    individually.

  • Using pixels for the
    flex-basis
    instead of percents.

  • Using
    table-layout: fixed
    .



I see nothing documenting this here: https://github.com/philipwalton/flexbugs and have come up dry elsewhere. Does anyone know what's going on?

Answer

That's because, according to CSS tables, anonymous table objects should be generated when tabular elements are not children of a table:

enter image description here

According to the Flexbox Last Call Working Draft, it was that anonymous table what became the flex item, not the table cells:

Some values of display trigger the creation of anonymous boxes around the original box. It’s the outermost box—the direct child of the flex container box—that becomes a flex item. For example, given two contiguous child elements with display: table-cell, the anonymous table wrapper box generated around them [CSS21] becomes the flex item.

Since the table cells are not flex items, they ignore the flex property. It would apply to the anonymous table, but CSS selectors can't select anonymous elements.

However, Chrome disagreed with the spec and decided to blockify the table cells instead.

Then the CSS working group decided to standardize Chrome's behavior:

If you have a flex container and you put two table cells in it, they won't become flex items independently. They'll wrap in an anonymous table and that will be flex.

However, Chrome had implemented it so that each item is independently a flex item. [...] So it turns the table cells into blocks.

I've seen at least one presentation at a conference where they took advantage of this to create fallback behavior for a flex. [...] If you're not trying to trigger fallback, I don't know why you'd put a bunch of table cells in flex and get it wrapped in anonymous stuff. [...]

RESOLVED: Just blockify the children of flex and grid containers. Don't do anonymous box fix-up

The first Flexbox Candidate Recommendation was published with that new resolution:

Some values of display normally trigger the creation of anonymous boxes around the original box. If such a box is a flex item, it is blockified first, and so anonymous box creation will not happen. For example, two contiguous flex items with display: table-cell will become two separate display: block flex items, instead of being wrapped into a single anonymous table.

And then Firefox implemented the new behavior starting at version 47 (bug 1185140).

For older versions, you can style the cells as blocks manually:

.flex-container > td {
  display: block;
}

* {
  box-sizing: border-box;
}
table{
  border: 1px solid #ddd;
  width: 100%;
}
tbody {
  background: #fff;
}
tr {
  display: flex;
}
td {
  display: block;
}
td:first-child {
  flex: 1 1 80%;
  background: mistyrose;
}
td:nth-child(2){
  flex: 0 0 10%;
  background: Aquamarine;
}
td:nth-child(3){
  flex: 0 0 10%;
  background: pink;
}
<table>
  <tbody>
    <tr>
      <td>Ted</td>
      <td>1</td>
      <td>100%</td>
    </tr>
    <tr>
      <td>Turd Ferguson</td>
      <td>2</td>
      <td>65%</td>
     </tr>
    <tr>
      <td>Hingle McKringleberry</td>
      <td>3</td>
      <td>99%</td>
     </tr>
  </tbody>
</table>