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

Wanna try this - JS Fiddle

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

As I said in my comment, Play with the table width. So here it is. Remove display:none from style line .col2 .tbl { width: 150px; background-color: blue; display:none; } and all you can see. this is perhaps what you want.