How to auto scroll to a specific table cell in a horizontal table

Question

In my current project I have a table contained within a div that has 10 cells positioned horizontally. This is done using the following code below...

<div id="dashboard">
    <table>
        <tr>
            <td><div id="cell1"></div></td>
            <td><div id="cell2"></div></td>
            <td><div id="cell3"></div></td>
            <td><div id="cell4"></div></td>
            <td><div id="cell5"></div></td>
            <td><div id="cell6"></div></td>
            <td><div id="cell7"></div></td>
            <td><div id="cell8"></div></td>
            <td><div id="cell9"></div></td>
            <td><div id="cell10"></div></td>
        </tr>
    </table>
</div>

I already have code saying that if a user clicks on a button that corresponds to a cell in the table, the cell will highlight yellow. Since the table's width is larger than the horizontal width of the page's container, I had to set the div table overflow property to auto. How can I make it so that if the user clicks a button for a specific cell that is not in view or only has some part of the cell in view, the table will auto scroll horizontally (left or right depending on the cell's location and the current view) to that specific cell.

Is there a JavaScript solution that would allow me to do this?

Does `go to cell` with `` work? I'm not sure if it also scrolls horizontally — maja, Jun 20 '14 at 14:40

maja · Accepted Answer · 2014-06-20T16:02:43.890

6

In order to scroll at any position within the same page, you can use the following:

Mark the element, where you want to scroll to, with this tag:

<a id="cellcontent">

And in order to scroll to that marker, just use a simple a-tag:

<a href="#cellcontent">go to cell</a>

Alternatevely, you can try it with JavaScript:

<script type="text/javascript">    
    function showIt(elID) {
        var el = document.getElementById(elID);
        el.scrollIntoView(true);
    }    
</script>

Source: https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

Edit: As Pluto suggested in the comments, the better approach is to put the id-tag directly into the cell:

<td id="cellcontent">Some content</td>

edited Jun 20 '14 at 16:02

answered Jun 20 '14 at 14:48

maja

17,250
17
82
125

Pretty sure you mean `id="cellcontent"` for the target element? – Pluto Jun 20 '14 at 15:11
This works well when moving from right to left across the table However, when I move from the left side to the right side on button click, it only displays the right side border of the selected cell, not the entire cell. – stefankram Jun 20 '14 at 15:30
That's because the first `a`-tag is on the left side. Try using `here's the cell's content` instead. – maja Jun 20 '14 at 15:38
@Pluto I wasn't aware of that, thx. In fact, both variants work, but id might be a bit faster: http://stackoverflow.com/questions/484719/html-anchors-with-name-or-id – maja Jun 20 '14 at 15:40
1

@user3688513 Or instead of setting the id on the `` tag, put it on the `` tag. – Pluto Jun 20 '14 at 15:51

score 1 · Answer 2 · answered Jun 20 '14 at 14:51

1

Apart from @maja's solution, you can also do it with javascript using the cell's left position with the function getBoundingClientRect() minus its margin and padding. Then moving the window or scroll container to that scroll position with element.scrollTo() function Ex:

window.scrollTo(document.getElementById("cell4").getBoundingClientRect().left - 30,0);

Check this fiddle: http://jsfiddle.net/RXKmY/

answered Jun 20 '14 at 14:51

Roberto Linares

2,215
3
23
35

I can't seem to get it working, when I click on the button for the corresponding cell, the webpage scrolls to the top of the page and doesn't move the table at all. – stefankram Jun 20 '14 at 15:26
In my example I am moving the window scroll. In your case maybe the scroll is in the `div id="dashboard"` element. If that's the case, replace the `window.scrollTo` by `document.getElementById("dashboard").scrollTo`. @maja's javsacript suggestion is also valid. – Roberto Linares Jun 20 '14 at 16:18

How to auto scroll to a specific table cell in a horizontal table

2 Answers2