O layout da minha GUI da web é parcialmente orientado por tabelas CSS. Isto é principalmente porqueEu quero que as "células" tenham a mesma altura em todas as situações sem dores de cabeça maciças em torno do alinhamento. No geral, essa abordagem tem sido muito bem-sucedida.

No entanto, tenho um problema pelo qual a célula direita da tabela às vezes pode demorar um pouco para ser renderizada, fazendo com que a célula esquerda tenha brevemente 100% da largura da página. Isso causa um efeito perceptível de "tremulação" que, embora menor, é meio irritante. E eu decidi consertar isso.

Aqui está uma representação vaga de como minha página funciona:

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

Tudo está bem até você usar suas ferramentas de desenvolvedor para fornecer#tbl-col2 a display: none diretiva, [espero com precisão], simulando o estado do mecanismo de renderização do navegador nos momentos entre#tbl-col1 tendo sido prestado, e#tbl-col2 sendo renderizado.

Notar que#tbl-col1 ocupa imediatamente 100% da largura da tabela, apesar da largura que eu dei. Eu meio que entendo por que isso está acontecendo: afinal, eu tenhoPerguntou o navegador para fazer odivs se comportam como mesas. Ainda assim, é indesejável aqui.

Tentei consertar isso inserindo um "espaçador", esperando que sem umwidth expandiria para preencher todo o espaço do lado direito até o momento em que o lado direito fosse renderizado:

#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 você pode ver, ocultando novamente#tbl-col2, não fez uma diferença cega:#tbl-col1 ainda ocupava toda a largura da tabela, em vez dos 50px permitidos.

Supondo que prefiro corrigir isso do que abandonar completamente o layout das tabelas CSS, o que posso fazer?

Ou vou ter que substituir o layout ou, pior ainda, adotar uma abordagem JavaScript para resolver o FoUC?