smooth table clickscroll

by karin

HTML

<div class="wrapper1">
    <div class="div1"></div>
</div>
<div class="container">
    <table border="1">
        <thead>
            <tr>
                <th>
                    <div>2016<span class="ui-icon ui-icon-carat-2-n-s"></span>
                    </div>
                </th>
                <th>
                    <div>2017<span class="ui-icon ui-icon-carat-2-n-s"></span>
                    </div>
                </th>
                <th>
                    <div>2018<span class="ui-icon ui-icon-carat-2-n-s"></span>
                    </div>
                </th>
                <th>
                    <div>2019<span class="ui-icon ui-icon-carat-2-n-s"></span>
                    </div>
                </th>
                <th>
                    <div>2020<span class="ui-icon ui-icon-carat-2-n-s"></span>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>11</td>
                <td>22</td>
                <td>33</td>
                <td>44</td>
                <td>55</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>11</td>
                <td>22</td>
                <td>33</td>
                <td>44</td>
                <td>55</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.div1, table {
    width:30em;
    margin-left:8em;
}
.div1 {
    height: 0.5em;
}
table tr td:not(:first-child), table tr th:not(:first-child) {
    background:lightyellow;
}
table tr td:nth-child(2), table tr th:nth-child(2) {
text-align:right;
  padding-left:11em;
}
table tr td:first-child, table tr th:first-child {
    background:goldenrod;
    width:8em;
    position:absolute;
    left:5.5em;
    top:auto;
}
table{
  direction:ltr;
}
.wrapper1, .container {
    background:salmon;
    width: 25em;
    overflow-x:auto;
    margin-left:5em;
    overflow-y:visible;
   direction:rtl;
}
/*.wrapper1, .wrapper2{width: 300px; border: none 0px RED;
overflow-x: scroll; overflow-y:hidden;}
.wrapper1{height: 20px; }
.wrapper2{height: 200px; }
.div1 {width:1000px; height: 20px; }
.div2 {width:1000px; height: 200px; background-color: #88FF88;
overflow: auto;}*/

JavaScript

$(function () {
    $(".wrapper1").scroll(function () {
        $(".container")
            .scrollLeft($(".wrapper1").scrollLeft());
    });
    $(".container").scroll(function () {
        $(".wrapper1")
            .scrollLeft($(".container").scrollLeft());
    });
});