El diseño de mi GUI web está parcialmente controlado por tablas CSS. Esto es principalmente porqueQuiero que las "celdas" tengan la misma altura en todas las situaciones sin dolores de cabeza masivos que rodean la alineación. En general, este enfoque ha sido muy exitoso.

Sin embargo, tengo un problema por el cual la celda de la derecha en la tabla a veces puede tardar un momento en renderizarse, lo que hace que la celda de la izquierda tenga brevemente el 100% del ancho de la página. Esto provoca un notable efecto de "parpadeo" que, aunque menor, es un poco molesto. Y he decidido arreglarlo.

Aquí hay una vaga representación de cómo funciona mi página:

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

Todo está bien hasta que use sus herramientas de desarrollador para dar#tbl-col2 a display: none directiva, [espero con precisión] simulando el estado del motor de renderizado del navegador en los momentos entre#tbl-col1 habiendo sido rendido, y#tbl-col2 siendo prestados.

Darse cuenta de#tbl-col1 Inmediatamente ocupa el 100% del ancho de la tabla, a pesar del ancho que le he dado. Entiendo por qué sucede esto: después de todo, hepreguntó el navegador para hacer eldivs se comportan como tablas. Aún así, no es deseable aquí.

Traté de arreglar esto insertando un "espaciador", esperando que sin unwidth se expandiría para llenar todo el espacio en el lado derecho hasta el momento en que se renderice el lado derecho:

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

Como puedes ver escondiéndote de nuevo#tbl-col2, no hizo la menor diferencia:#tbl-col1 Todavía ocupaba todo el ancho de la mesa, en lugar de los 50 px, lo permití.

Suponiendo que prefiero arreglar esto que abandonar el diseño de Tablas CSS por completo, ¿qué puedo hacer?

¿O tendré que reemplazar el diseño o, peor aún, adoptar un enfoque de JavaScript para resolver el FoUC?