html - 如何避免 "Flash of Unstyled Content"在 CSS 表格中使用固定宽度的单元格？

Question

我的 Web GUI 的布局部分由 CSS 表格驱动。这主要是因为I want the "cells" to have the same height under all situations没有任何围绕对齐的巨大头痛。总的来说，这种方法非常成功。

但是，我确实遇到了一个问题，即表格中右侧的单元格有时需要一些时间来呈现，导致左侧单元格短暂地占页面宽度的 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 一个 display: none 指令，[我希望准确] 模拟浏览器的状态在 #tbl-col1 被渲染和 #tbl-col2 被渲染之间的时刻渲染引擎。

请注意，#tbl-col1 立即占据了表格宽度的 100%，尽管我给它指定了宽度。我有点理解为什么会这样:毕竟，我已经要求浏览器让 div 表现得像表格。尽管如此，这里还是不受欢迎。

我试图通过插入一个“间隔器”来解决这个问题，希望在没有 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？

Answer 1

在类似情况下(例如 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>

如果单元格内没有内容，则该格式化列是不可见的，但它仍然会告诉浏览器应该格式化表格的方式。