У меня есть таблица с правым фиксированным столбцом, а слева есть 8 столбцов с x-прокруткой. Я использовал код, подобный этому
как Я создаю таблицу HTML с фиксированным/закрепленным левым столбцом и прокручиваемым телом?
Это работает по большей части, однако это на адаптивном сайте, поэтому при уменьшении страницы правый фиксированный столбец сдвигается примерно до 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>