每页2列以固定标题打印html表

Question

我需要以最大化空间并填充整个页面的方式打印一些内容。为了将内容分为2列，我在服务器端执行此操作。我有一份清单，将其分成两半。当我直接对来自数据库的内容执行此操作时，此方法有效，但在我按类别对计数进行分组以免重复信息后，此方法不起作用。因此，为什么html页面上的所有内容看起来都不均匀。

AbastecimentosColuna1 = referenciasList.Take(referenciasList.Count() / 2).ToList();
AbastecimentosColuna2 = referenciasList.Skip(referenciasList.Count() / 2).ToList();

换句话说，如何使内容适应整个页面？还是有其他方法可以将内容拆分为两列，而无需从服务器端拆分数组？

内容

  <div class="row">
            <div class="col-6 table-responsive">

    <table class="table table-sm table-bordered border-dark text-center">
                <thead>
                    <tr>
                        <th>Referência</th>
                        <th>Qtd. Abastecimento</th>
                        <th>Peças Por Caixa</th>
                        <th>Nº Caixas</th>
                        <th>Localização - Etiqueta FIFO</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.AbastecimentosColuna1)
                    {
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.Referencia)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.QtdAbastecimento)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.QtdPecasPorCaixa)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.QtdCaixas)
                            </td>
                            <td>

                                @foreach (var localizacao in item.Localizacoes)
                                {
                                    <div class="row py-2">
                                        <div class="col-6">
                                            @localizacao.Localizacao
                                        </div>

                                        <div class="col-6">
                                            @foreach (var etiqueta in localizacao.Etiquetas)
                                            {
                                                @etiqueta.Etiqueta
                                                <br />
                                            }
                                        </div>
                                    </div>
                                }

                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
        <div class="col-6 table-responsive">
            <table class="table table-sm table-bordered border-dark text-center">
                <thead>
                    <tr>
                        <th>Referência</th>
                        <th>Qtd. Abastecimento</th>
                        <th>Peças Por Caixa</th>
                        <th>Nº Caixas</th>
                        <th>Localização - Etiqueta FIFO</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.AbastecimentosColuna2)
                    {
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.Referencia)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.QtdAbastecimento)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.QtdPecasPorCaixa)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.QtdCaixas)
                            </td>
                            <td>

                                @foreach (var localizacao in item.Localizacoes)
                                {
                                    <div class="row py-2">
                                        <div class="col-6">
                                            @localizacao.Localizacao
                                        </div>

                                        <div class="col-6">
                                            @foreach (var etiqueta in localizacao.Etiquetas)
                                            {
                                                @etiqueta.Etiqueta
                                                <br />
                                            }
                                        </div>
                                    </div>
                                }

                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>