title: Fixed right column table scales to responsive design
body: <p>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</p>
  
  <p><a href="https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body">how do I create an HTML table with fixed/frozen left column and scrollable body?</a></p>
  
  <p>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!</p>
  
  <p><a href="https://jsfiddle.net/TBankston/5L7jkbfq/" rel="nofollow noreferrer">https://jsfiddle.net/TBankston/5L7jkbfq/</a></p>
  
  <p>CSS</p>
  
  <pre><code>.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;
      }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="page-header"&gt;
      &lt;h3&gt;Charity&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="table-responsive"&gt;
      &lt;table cellpadding="9"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.ID)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.EventName)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.Organization)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.District)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.Hours)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.Donation)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.TotalValue)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.ModifiedDate)
                  &lt;/th&gt;
                  &lt;th class="crud-links"&gt; Options&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          @foreach (var item in Model)
          {
              &lt;tr&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.ID)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.EventName)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.Organization)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.District)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.Hours)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.Donation)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.TotalValue)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.ModifiedDate)
                  &lt;/td&gt;
                  &lt;td class="crud-links"&gt;
                      @Html.ActionLink("Details", "Details", new { id = item.ID })
                      @if (ViewBag.current_User.CanEdit())
                      {
                          &lt;span&gt;|&lt;/span&gt;
                          @Html.ActionLink("Edit", "Edit", new { id = item.ID })
                          &lt;span&gt;|&lt;/span&gt;
                          @Html.ActionLink("Delete", "Delete", new { id = item.ID })
                      }
                  &lt;/td&gt;
              &lt;/tr&gt;
          }
      &lt;/table&gt;
      &lt;table&gt;
          &lt;tr&gt;
  
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>