How can I avoid a “Flash of Unstyled Content” using fixed-width cells in CSS Tables?

Question

My web GUI\'s layout is partially driven by CSS tables. This is mainly because I want the \"cells\" to have the same height under all situations without any massive headaches su

Answer 1

That's because, by default, tables use the automatic table layout.

The CSS 2.1 spec doesn't define that layout mode, but suggests a (non-normative) algorithm, which reflects the behavior of several popular HTML user agents.

According to that algorithm,

If the used width is greater than MIN, the extra width should be distributed over the columns.

However, it doesn't explain how it should be distributed. In fact, your attempt of inserting a "spacer" element works perfectly on Firefox, but not on Chrome.

Instead, you may want to try the fixed table mode, which is properly defined in the spec (and thus more reliable), is usually faster, and solves the problem too:

In the fixed table layout algorithm, the width of each column is determined as follows:

1. A column element with a value other than auto for the width property sets the width for that column.
2. Otherwise, a cell in the first row with a value other than auto for the width property determines the width for that column. If the cell spans more than one column, the width is divided over the columns.
3. Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).

According to the 3rd point, the spacer element will receive the remaining 150px before the last cell has been loaded. And will receive the remaining 0px once loaded.

So you need

#tbl { table-layout: fixed; }

.tbl {
  display: table;
  table-layout: fixed;
  width: 200px;
  border: 1px solid black;
}
.tbl-row {
  display: table-row;
}
.tbl-col1,
.tbl-spc,
.tbl-col2 {
  display: table-cell;
}
.tbl-col1 {
  width: 50px;
  background-color: red;
}
.tbl-col2 {
  width: 150px;
  background-color: blue;
}
.hide {
  display: none;
}

While parsing the first cell:

  

    
LHS
    

    
RHS
  


While parsing the spacer:

  

    
LHS
    

    
RHS
  


While parsing the second cell:

  

    
LHS
    

    
RHS
  

However, there is still a problem: the spacer won't be displayed until the first cell has been parsed completely.

That means the spacer must be loaded first, but must not be the first to be displayed. Sadly, the CSS table layout does not allow to reorder the cells. But it can be achieved by removing the non-semantic spacer from the HTML and using an ::after pseudo-element instead:

#tbl-row:after {
  content: '';
  display: table-cell;
}

.tbl {
  display: table;
  table-layout: fixed;
  width: 200px;
  border: 1px solid black;
}
.tbl-row {
  display: table-row;
}
.tbl-row:after {
  content: '';
  display: table-cell;
}
.tbl-col1,
.tbl-col2 {
  display: table-cell;
}
.tbl-col1 {
  width: 50px;
  background-color: red;
}
.tbl-col2 {
  width: 150px;
  background-color: blue;
}
.hide {
  display: none;
}

While parsing the first cell:

  

    
LHS
    
RHS
  


While parsing the second cell:

  

    
LHS
    
RHS