我的 Web GUI 布局部分由 CSS 表驱动。这主要是因为我希望“单元格”在所有情况下都具有相同的高度 http://www.senktec.com/2014/01/using-css-display-table-cell-for-columns/没有任何关于对齐的令人头疼的问题。总体而言，这种做法非常成功。
但是，我确实遇到一个问题，即表格中的右侧单元格有时需要一些时间才能呈现，导致左侧单元格短暂地具有 100% 的页面宽度。这会导致明显的“闪烁”效果，虽然很小，但有点烦人。我决定解决它。
这是我的页面如何工作的模糊表示：
#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>
一切都很好，直到您使用开发人员工具来提供#tbl-col2 a display: none指令，[我希望准确地]模拟浏览器渲染引擎在#tbl-col1已被渲染，并且#tbl-col2正在渲染。
请注意#tbl-col1尽管我给了它宽度，但它立即占据了表格宽度的 100%。我有点明白为什么会发生这种情况：毕竟，我已经asked浏览器使divs 的行为就像桌子一样。尽管如此，这里还是不受欢迎的。
我试图通过插入一个“垫片”来解决这个问题，希望没有width它会扩展以填充右侧的所有空间，直到右侧被渲染：
#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>
如果单元格内没有内容，该格式化列是不可见的，但它仍然告诉浏览器表格的格式设置方式。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
