as Layout der @My Web-GUI wird teilweise von CSS-Tabellen gesteuert. Das liegt hauptsächlich daran, dassIch möchte, dass die "Zellen" unter allen Umständen die gleiche Höhe haben Ohne massive Kopfschmerzen bei der Ausrichtung. Insgesamt war dieser Ansatz sehr erfolgreich.

Ich habe jedoch ein Problem, bei dem es manchmal einen Moment dauern kann, bis die rechte Zelle in der Tabelle gerendert ist, sodass die linke Zelle kurzzeitig 100% der Seitenbreite aufweist. Dies verursacht einen merklichen "Flimmer" -Effekt, der, obwohl er geringfügig ist, irgendwie ärgerlich ist. Und ich habe beschlossen, es zu beheben.

Hier ist eine vage Darstellung, wie meine Seite funktioniert:

#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>

Alles ist gut, bis Sie Ihre Entwickler-Tools verwenden, um @ zu geb#tbl-col2 a display: none Direktive, [ich hoffe genau] Simulation des Status der Rendering-Engine des Browsers in den Momenten zwischen#tbl-col1 wurde gerendert und#tbl-col2 wird gerendert.

Beachte das#tbl-col1 nimmt sofort 100% der Breite des Tisches ein, trotz der Breite, die ich ihm gegeben habe. Ich verstehe irgendwie, warum das passiert: Immerhin habe ichfragt der Browser, um das @ zu machdivs verhalten sich wie Tabellen. Trotzdem ist es hier unerwünscht.

Ich habe versucht, dies durch Einfügen eines "Spacers" zu beheben, in der Hoffnung, dass ohnewidth es würde erweitert, um den gesamten Raum auf der rechten Seite zu füllen, bis die rechte Seite gerendert wird:

#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>

Wie du siehst, versteckst du dich wieder#tbl-col2, es machte keinen blinden Unterschied:#tbl-col1 nahm immer noch die gesamte Breite des Tisches ein, anstatt die 50px, die ich zugelassen habe.

Angenommen, ich möchte dies lieber beheben, als das CSS-Tabellen-Layout insgesamt aufzugeben. Was kann ich tun?

Oder muss ich das Layout ersetzen oder, noch schlimmer, einen JavaScript-Ansatz zur Lösung des FoUC verwenden?