How to leave the last column fixed with horizontal scroolbar?

Question

How to leave the last column fixed with horizontal scroolbar?

Navigation

#1 by (1 votes)

1

I'm using a simple plugin: link

How can I leave last column fixed?

Here is an example of a fixed column: link

I'm trying to get the last column fixed, but nothing is right. Follow the code in jsfiddle: link

Follow the code:

<div class="table-responsive">
  <table id="grid-command-buttons" class="table table-condensed table-hover table-striped bootgrid-table" aria-busy="false">

...

  </table>
</div>

Any solution?

html5 bootstrap-3 table bootgrid

asked by anonymous 19.03.2017 / 07:04

1 answer

How Wordpress Updates Are Made JavaScript show multiple div's at different time intervals

score 1 · Accepted Answer

I used css to try to freeze this last column. For this, I created the following classes:

.bootgrid-wrapper {
  width: 90%; // 100% menos o tamanho da ".fixed-column-right"
  overflow-x: scroll;
  overflow-y: visible;
}

.fixed-column-right {
  position: absolute;
  width: 10%;
  right: 0;
}

Then in your% of% where% is% in, you add the first class <div> :

<div class="table-responsive bootgrid-wrapper">
  <table id="grid-command-buttons" class="table table-condensed table-hover table-striped bootgrid-table" aria-busy="false">
    ...
  </table
</div>

... and then need to add the <table> class to bootgrid-wrapper and fixed-column-right of last column. In the case of bootgrid, this is done by adding two attributes in <th> :

<td> : the bootgrid will add in the class of own <th>
data-header-css-class="fixed-column-right" : the bootgrid will add in the class of each <th> of that column.

Trying to directly add the data-css-class="fixed-column-right" attribute to <td> or class="alguma-classe" will not work, because when the bootgrid is mounted, it recreates everything, excluding its attributes.

In the end, your HTML looks like this:

<div class="table-responsive bootgrid-wrapper">
  <table id="grid-command-buttons" class="table table-condensed table-hover table-striped bootgrid-table" aria-busy="false">
    <thead>
      <tr>
        <th data-column-id="id" data-identifier="true" data-type="numeric">ID</th>
        <th data-column-id="sender">Sender</th>
        <th data-column-id="received" data-order="desc">Received</th>
        <th data-column-id="sender1">Sender</th>
        <th data-column-id="sender2">Sender</th>
        <th data-column-id="sender3">Sender</th>
        <th data-column-id="sender4">Sender</th>
        <th data-column-id="sender5">Sender</th>
        <th data-column-id="sender6">Sender</th>
        <th data-column-id="sender7">Sender</th>
        <th data-column-id="sender8">Sender</th>
        <th data-column-id="sender9">Sender</th>
        <th data-column-id="received" data-order="desc">Received</th>
        <th data-column-id="commands" data-header-css-class="fixed-column-right" data-css-class="fixed-column-right" data-formatter="commands" data-sortable="false">Coluna</th>
      </tr>
    </thead>
  </table>
</div>

Follow your updated JSFiddle .