display：table-row，在table-cell之前有多层行

Question

这是我正在使用的HTML。 （请注意：我无法更改HTML，只能更改样式）。

<div class="table">

    <div class="table-row">
        <div class="table-row-1">
            <div class="table-row-2">
                <div class="table-col">Column 1</div>
                <div class="table-col">Column 2</div>
            </div>
        </div>
        <div class="table-row-1">
            <div class="table-row-2">
                <div class="table-col">Column 1</div>
                <div class="table-col">Column 2</div>
            </div>
        </div>
    </div>


    <div class="table-row">
        <div class="table-row-1a">
            <div class="table-row-2">
                <div class="table-col">Column 1</div>
                <div class="table-col">Column 2</div>
            </div>
        </div>
        <div class="table-row-1b">
            <div class="table-row-2">
                <div class="table-col">Column 1</div>
                <div class="table-col">Column 2</div>
            </div>
        </div>
    </div>

</div>

如您所见，有多行包含实际单元格。我将display:table应用于主div，将display:table-row应用于第一个父行，然后display:table-cell应用于列单元格。

我无法使用实际的表格，因为我无法更改HTML。

我不确定应该对额外的行容器应用什么来确保它们不会影响表的结构。

此代码用于制作 flexbox网格，它在更大的屏幕上更加结构化，这意味着同一列中的单元格宽度相同。如果您可以建议除表格显示之外的其他解决方案，请执行，但我无法找到其他选项。

我正在少工作。