修复了右列表格缩放到响应式设计 [英] Fixed right column table scales to responsive design
问题描述
我有一个右固定列的桌子，左边有8列x轴滚动。我使用的代码类似于这个
这在大多数情况下都能正常工作，但是这是在响应式网站上，所以当您向下缩小页面时，右侧固定列会被推送到大约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;
保证金率：8％;
最大宽度：85％;
}
.crud-links {
position：absolute;
width：10em;
right：40px;
background-color：#ffffff;
HTML
< div class =page-header>
< h3>慈善< / 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>
< / thead>
@foreach（模型中的var项）
{
< 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（））
{
<跨度> |< /跨度>
@ Html.ActionLink（Edit，Edit，new {id = item.ID}）
< span> |< / span>
@ Html.ActionLink（删除，删除，新{id = item.ID}）
}
< / td>
< / tr>
}
< / table>
< table>
< tr>
< / tr>
< / table>
< / div>
我更新了一个可能的答案： p>
.page-header {
padding-bottom：9px;
margin：40px 0 20px;
border-bottom：1px solid #eeeeee;
}
@media（max-width：1300px）{
.table-hover th，.table-hover td {
padding：9px;
}
.table-responsive {
width：inherit;
最大宽度：80％;
margin-bottom：15px;
overflow-x：scroll;
overflow-y：hidden;
border：0;
border-right：200px纯色透明;
}
.crud-links {
position：absolute;
overflow：hidden;
width：191px;
right：0;
background-color：#ffffff;
}
}
https://jsfiddle.net/5L7jkbfq/12/
主要问题是你在表格本身中以像素为单位混合了固定尺寸的相对尺寸（以百分比表示）。在我的解决方案中，我从html代码中删除了单元格填充，并使用了右边框作为一个迷你黑客来让你有一个固定宽度列的响应宽度框。
I have a table with a right fixed column and there are 8 columns on the left with an x-scroll. I used code similar to this
how do I create an HTML table with fixed/frozen left column and scrollable body?
This works for the most part, however this is on a responsive site, so when you scale down the page the right fixed column pushed over until about 400px and then starts to overlap the columns on the left. In the JSFiddle example it starts off already overlapping the other columns, so if you expand the width of the result area you can see the overlapping issue. I applied a white background to the but I would like for the right column just to force the other column to become hidden in the scroll, all the way down to the lowest browser width. Any ideas!
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>
I updated your fiddle with a possible answer:
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eeeeee;
}
@media (max-width: 1300px) {
.table-hover th, .table-hover td {
padding: 9px;
}
.table-responsive {
width: inherit;
max-width: 80%;
margin-bottom: 15px;
overflow-x: scroll;
overflow-y: hidden;
border: 0;
border-right:200px solid transparent;
}
.crud-links{
position: absolute;
overflow:hidden;
width: 191px;
right: 0;
background-color: #ffffff;
}
}
https://jsfiddle.net/5L7jkbfq/12/
The main issue is that you were mixing fixed dimensions in pixels with relative dimensions in percent in the table itself.
In my solution, I removed the cell-padding from the html code and used the right border as a mini hack to allow you having a responsive width box with a fixed-width column.
这篇关于修复了右列表格缩放到响应式设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
