Table scroll with fixed first column

Question

I'm trying to get the table to scroll left/right on button click keeping the first column in it's place. My data is all in one table so I can't create two tables instead of one. Is there any way of doing this? See fiddle below.

jQuery:

$(document).ready(function() {
  $("#right").on("click", function() {
    var position = $("table").position();
    $("table").animate({
      left: position.left - 200
    }, 800);
  });
});
$("#left").on("click", function() {
var position = $("table").position();
 $("table").animate({
   left: position.left + 200
 }, 800);
});

CSS:

#table-wrapper {
width: 95%;
float: left;
overflow-x: scroll;
background: #ddd;

}

table {
 background: #fff;
 width: 1200px;
 text-align:center;
 overflow: hidden;
 position:relative;
}
table thead tr th:first-child,
table tbody tr td:first-child {
 background: yellow;
 top: auto;
 left: 0.5;
 position: absolute;
 width: 6em;
}

HTML:

<button id="left">&larr;</button>
<button id="right">&rarr;</button>

<div id="table-wrapper">
  <table border="1">
    <thead>
      <tr>
        <th>Heading1</th>
        <th>Heading2</th>
        <th>Heading3</th>
        <th>Heading4</th>
        <th>Heading5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
      </tr>
      <tr>
        <td>2</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
      </tr>
      <tr>
        <td>3</td>
        <td>32</td>
        <td>33</td>
        <td>34</td>
        <td>35</td>
      </tr>
    </tbody>
  </table>
</div>

Here is my fiddle.

Consider a pure CSS solution: stackoverflow.com/q/15811653/1066234 — Avatar
– Avatar, Commented May 1, 2020 at 6:29

Rajshekar Reddy · Accepted Answer · 2016-03-18 16:01:08Z

3

Here a Working Fiddle

Use this css position:fixed to fix the elements.

Make the below mentioned change

table thead tr th:first-child,
table tbody tr td:first-child {
  background: yellow;
  top: auto;
  position:fixed;  /*change this*/
  left: 0.5;
  width: 6em;
}

Also you have to change your Jquery a little bit. The issue is with the selectors.

In your Jquery replace $("table") with $("#table-wrapper") because its the table-wrapper having the scroll and not the table.

edited Mar 18, 2016 at 16:01

answered Mar 18, 2016 at 15:46

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rajshekar Reddy Over a year ago

oh.. I just scrolled the scroller manually, I did not see the buttons. I will fix it.. just a moment

RomanMitasov · Accepted Answer · 2019-11-08 11:27:32Z

0

If your table is more complicated and it's imposible to make columns of fixed size, you need to use jQuery solution, not only CSS one.

I spent some time solving the same problem and found the TableHeadFixer jQuery plugin. But it probably does'nt work, so i made my own version - TableFixer. You can use it like so:

$('#table').tableFixer({
  head: false, // true for header fix
  foot: false, // true for footer fix
  left: 1, // number of fixed columns on the left
  right: 0, // number of fixed columns on the right
});

And then, add some scroll logic into button click event handler:

$('#table-wrapper').scrollLeft($('#table-wrapper > table').width());

edited Nov 8, 2019 at 11:27

answered Oct 11, 2018 at 15:10

RomanMitasov

1,05113 silver badges32 bronze badges

1 Comment

RomanMitasov Over a year ago

I agree, my answer does not really solve the main problem, but when I looked for solution of fixing table columns, I didn't find any, so I decided to post my solution here. In fact, to solve problem you only need to add auto-scroll logiс as I did. Thanks for mentioning this mistake, I'm going to edit answer right now.

Collectives™ on Stack Overflow

Table scroll with fixed first column

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related