html - レスポンシブ デザインに合わせて右側の列のテーブル スケールを修正しました

Question

右側に固定列があるテーブルがあり、左側に x スクロールのある 8 つの列があります。これに似たコードを使用しました

左の列が固定/固定され、本文がスクロール可能な HTML テーブルを作成するにはどうすればよいですか?

これはほとんどの場合機能しますが、これはレスポンシブ サイトであるため、ページを縮小すると、右側の固定列が約 400px まで押し出され、左側の列と重なり始めます。JSFiddle の例では、すでに他の列とオーバーラップしているため、結果領域の幅を拡大すると、オーバーラップの問題が表示されます。に白い背景を適用しましたが、右の列だけで他の列をスクロールで非表示にし、ブラウザの幅を最も低くしたいと思います。何か案は！

https://jsfiddle.net/TBankston/5L7jkbfq/

CSS

.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eeeeee;
}

  .table-responsive {
    width: inherit;
    margin-bottom: 15px;
    overflow-x:  scroll;
    overflow-y: hidden;
    border: 0px solid #dddddd;
    margin-right: 8%;
    max-width: 85%;
  }

.crud-links{
    position: absolute;
    width: 10em;
    right: 40px;
    background-color: #ffffff;
    }

HTML

<div class="page-header">
    <h3>Charity</h3>
</div>
<div class="table-responsive">
    <table cellpadding="9">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.ID)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.EventName)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Organization)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.District)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Hours)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Donation)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.TotalValue)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ModifiedDate)
                </th>
                <th class="crud-links"> Options</th>
            </tr>
        </thead>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.EventName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Organization)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.District)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Hours)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Donation)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.TotalValue)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ModifiedDate)
                </td>
                <td class="crud-links">
                    @Html.ActionLink("Details", "Details", new { id = item.ID })
                    @if (ViewBag.current_User.CanEdit())
                    {
                        <span>|</span>
                        @Html.ActionLink("Edit", "Edit", new { id = item.ID })
                        <span>|</span>
                        @Html.ActionLink("Delete", "Delete", new { id = item.ID })
                    }
                </td>
            </tr>
        }
    </table>
    <table>
        <tr>

        </tr>
    </table>
</div>