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

would this be a reasonable fix?

#tbl      { display: table; width: 200px; border: 1px solid black; }
#tbl-row  { display: flex;  }
#tbl-col1,
#tbl-spc,
#tbl-col2 {
   flex:0;
   overflow:hidden
}

#tbl-col1 { flex-basis: 50px;  background-color: red; }
#tbl-col2 { flex-basis: 150px; background-color: blue; }

    

        
LHS-LHS-LHS-LHS
        

        
RHS
    

EDIT:

here's a fiddle with prefixes and fallback