Макет моего веб-интерфейса частично определяется таблицами CSS. Это в основном потому, чтоЯ хочу, чтобы "клетки" имели одинаковую высоту во всех ситуациях без каких-либо массивных головных болей вокруг выравнивания. В целом, этот подход был очень успешным.

Однако у меня есть проблема, из-за которой правая ячейка в таблице иногда может занять некоторое время для рендеринга, в результате чего левая ячейка ненадолго занимает 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% ширины стола, несмотря на ширину, которую я ему дал. Я вроде понимаю, почему это происходит: в конце концов, яспросил браузер, чтобы сделать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 по-прежнему занимал всю ширину стола, а не 50 пикселей, которые я позволил.

Если я предпочел бы исправить это, чем вообще отказаться от макета таблиц CSS, что я могу сделать?

Или мне придется заменить макет или, что еще хуже, использовать JavaScript-подход к решению FoUC?