fixed table first column

HTML

<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

table tr td:first-child,
table tr th:first-child{
    background:goldenrod;
     width:8em;
     position:absolute;
    left:0;
    top:auto;
}
table tr td,
table tr th{
    width:10em;
}
.container{
    padding:16px;
    background:ivory;
    width: 200px;
    overflow-x:scroll;
    margin-left:5em;
    overflow-y:visible;
    padding-bottom:1px;
}