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?

Answer 1

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>

Answer 2

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/