我有一个带有右侧固定列的表格,左侧有 8 列带有 x 滚动。我使用了类似的代码
这在大多数情况下都有效,但是这是在响应式站点上,因此当您缩小页面时,右侧的固定列被推到大约 400 像素,然后开始与左侧的列重叠。在 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>