修复了右栏表缩放到响应式设计答案

【问题标题】：Fixed right column table scales to responsive design修复了右栏表缩放到响应式设计
【发布时间】：2015-12-11 18:34:18
【问题描述】：

我有一个右侧固定列的表格，左侧有 8 列带有 x 滚动。我使用了类似的代码

how do I create an HTML table with fixed/frozen left column and scrollable body?

这在大多数情况下都有效，但这是在响应式网站上，因此当您缩小页面时，右侧固定列被推到大约 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>

【问题讨论】：

标签： html css html-table responsiveness

【解决方案1】：

您的表格没有继承最大宽度。

.table-responsive table {
    table-layout:fixed;
}

我尝试将此答案设置为固定的表格布局：Why is my HTML table not respecting my CSS column width?

这不起作用，所以我在窗口调整大小时使用 JQuery 修改了最大宽度，来自这个答案：

JQuery For Setting A Dynamic max-width

https://jsfiddle.net/wqfhuknu/

但是，我必须将宽度更改为 80% 才能获得任何重叠。

【讨论】：

【解决方案2】：

我用一个可能的答案更新了你的小提琴：

.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/

主要问题是您在表格本身中混合了以像素为单位的固定尺寸与以百分比为单位的相对尺寸。

在我的解决方案中，我从 html 代码中删除了单元格填充，并使用右边框作为一个小技巧，以允许您拥有一个具有固定宽度列的响应式宽度框。

【讨论】：