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

What I like to do in similar cases (for example html emails) is to pre-define column widths using empty cells this way:

.tbl {
    display: table;
    width: 200px;
    border: 1px solid black;
    color: #fff;
}
.tbl-row {
    display: table-row;
}
.tbl-cell {
    display: table-cell;
}
.tbl-col1 {
    width: 50px;
    background-color: red;
}
.tbl-col2 {
    background-color: blue;
}

Pre-define columns width by adding additional row


    

        

        

    
    

        
LHS
        
RHS
    

That formatting column is invisible if there is no content inside cells, but still it tells browser the way table should be formatted.