表格格式问题

我正在 asp.net core 中制作一个 Web 应用程序来使用数据库，并且我有一个来自宽表的页面，并为其制作了滚动条。该表还有一个“操作”列，其中有两个按钮（链接）用于更改记录和从表中删除记录。具体在代码中，表格如下所示

<div class="big-table">
    <table class="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.PlannedEvents.FirstOrDefault().Event.Name)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PlannedEvents.FirstOrDefault().Event.Unit)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PlannedEvents.FirstOrDefault().Enterprise.Name)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PlannedEvents.FirstOrDefault().DateOfStart)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PlannedEvents.FirstOrDefault().DateOfEnd)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PlannedEvents.FirstOrDefault().Scope)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PlannedEvents.FirstOrDefault().Expenses)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PlannedEvents.FirstOrDefault().EconomicEffect)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PlannedEvents.FirstOrDefault().Responsible.Surname)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PlannedEvents.FirstOrDefault().Responsible.Name)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PlannedEvents.FirstOrDefault().Responsible.MiddleName)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.PlannedEvents.FirstOrDefault().Responsible.Phone)
                </th>
                <th>
                    Сумма финансиирования
                </th>
                <th>
                    Действия
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.PlannedEvents)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelitem => item.Event.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(model => item.Event.Unit)
                    </td>
                    <td>
                        @Html.DisplayFor(model => item.Enterprise.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(model => item.DateOfStart)
                    </td>
                    <td>
                        @Html.DisplayFor(model => item.DateOfEnd)
                    </td>
                    <td>
                        @Html.DisplayFor(model => item.Scope)
                    </td>
                    <td>
                        @Html.DisplayFor(model => item.Expenses)
                    </td>
                    <td>
                        @Html.DisplayFor(model => item.EconomicEffect)
                    </td>
                    <td>
                        @Html.DisplayFor(model => item.Responsible.Surname)
                    </td>
                    <td>
                        @Html.DisplayFor(model => item.Responsible.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(model => item.Responsible.MiddleName)
                    </td>
                    <td>
                        @Html.DisplayFor(model => item.Responsible.Phone)
                    </td>
                    <td>
                        @foreach (var sumByEvent in ViewBag.SumsByEvent)
                        {
                            @if (sumByEvent.EventId == item.Id)
                            {
                                @sumByEvent.TotalMoney
                            }
                        }
                    </td>
                    <td>
                        @Html.ActionLink("Удалить", "Remove", new { id = item.Id }) |
                        @Html.ActionLink("Изменить", "Edit", new { id = item.Id })
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

样式已应用于表格，特别是那些允许表格水平滚动的样式。

.big-table {
    overflow: auto;
    position: relative;
}

    .big-table table {
        display: inline-block;
        vertical-align: top;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

问题是您需要以将操作列与主表分开的方式创建表。即垂直滚动时，也会滚动并关联到主表。但是除了带有动作的列之外的所有列都需要进行水平滚动，因为 它只需要放在桌子旁边。也许你可以使用 CSS 做类似的事情？