如何避免出现“未样式化内容闪烁"?在CSS表格中使用固定宽度的单元格?

#tbl { display: table; 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; } <div id="tbl"> <div id="tbl-row"> <div id="tbl-col1">LHS</div> <div id="tbl-spc"></div> <div id="tbl-col2">RHS</div> </div></div> 正如您再次隐藏#tbl-col2所看到的，它并没有造成任何盲目的区别:#tbl-col1仍然占据了表格的整个宽度，而不是我允许的50px.假设我宁愿解决此问题，也不愿完全放弃CSS Tables布局，该怎么办?还是我必须替换布局，或者更糟的是采用JavaScript方法解决FoUC?解决方案在类似情况下(例如html电子邮件)，我喜欢使用空单元格预先定义列宽: .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;} <h3>Pre-define columns width by adding additional row</h3><div class="tbl"> <div class="tbl-row tbl-format"> <div class="tbl-cell tbl-col1"></div> <div class="tbl-cell tbl-col2"></div> </div> <div class="tbl-row"> <div class="tbl-cell tbl-col1">LHS</div> <div class="tbl-cell tbl-col2">RHS</div> </div></div> 如果单元格中没有任何内容，则该格式设置列将不可见，但仍会告诉浏览器表的格式设置方式.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 surrounding alignment. Overall, this approach has been very successful.However, I do have a problem whereby the right-hand cell in the table can sometimes take a moment to render, causing the left-hand cell to briefly have 100% of the page width. This causes a noticeable "flicker" effect which, although minor, is kind of annoying. And I've decided to fix it.Here is a vague representation of how my page works:#tbl { display: table; width: 200px; border: 1px solid black; }#tbl-row { display: table-row; }#tbl-col1,#tbl-col2 { display: table-cell; }#tbl-col1 { width: 50px; background-color: red; }#tbl-col2 { background-color: blue; }<div id="tbl"> <div id="tbl-row"> <div id="tbl-col1">LHS</div> <div id="tbl-col2">RHS</div> </div></div>All's well and good until you use your developer tools to give #tbl-col2 a display: none directive, [I hope accurately] simulating the state of the browser's rendering engine in the moments between #tbl-col1 having been rendered, and #tbl-col2 being rendered.Notice that #tbl-col1 immediately takes up 100% of the width of the table, despite the width I've given it. I sort of understand why this is happening: after all, I've asked the browser to make the divs behave like tables. Still, it's undesirable here.I tried to fix this by inserting a "spacer", hoping that without a width it would expand to fill all the space on the right-hand side until such time as the right-hand side got rendered:#tbl { display: table; 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; }<div id="tbl"> <div id="tbl-row"> <div id="tbl-col1">LHS</div> <div id="tbl-spc"></div> <div id="tbl-col2">RHS</div> </div></div>As you can see by again hiding #tbl-col2, it made not a blind bit of difference: #tbl-col1 still took the whole width of the table, rather than the 50px I allowed it.Assuming I'd rather fix this than abandon the CSS Tables layout altogether, what can I do?Or am I going to have to replace the layout or, even worse, take a JavaScript approach to resolving the FoUC? 解决方案 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;}<h3>Pre-define columns width by adding additional row</h3><div class="tbl"> <div class="tbl-row tbl-format"> <div class="tbl-cell tbl-col1"></div> <div class="tbl-cell tbl-col2"></div> </div> <div class="tbl-row"> <div class="tbl-cell tbl-col1">LHS</div> <div class="tbl-cell tbl-col2">RHS</div> </div></div>That formatting column is invisible if there is no content inside cells, but still it tells browser the way table should be formatted. 这篇关于如何避免出现“未样式化内容闪烁"?在CSS表格中使用固定宽度的单元格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！