Fixed right column table scales to responsive desi

问题:

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>

回答1:

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.

回答2:

Your table is not inheriting the max-width.

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

I tried setting the table-layout to fixed from this answer: Why is my HTML table not respecting my CSS column width?

This didn't work so I modified the max-width using JQuery on window resize, from this answer:

JQuery For Setting A Dynamic max-width

https://jsfiddle.net/wqfhuknu/

However, I had to change the width to 80% to get no overlap whatsoever.