In the following fiddle I create a table where I need it to be right to left. 
Everything is fine except that the scrollbar at the bottom of the table initially is in the left of the page and so the user can not see the first column. 

[FiddleDemo](https://jsfiddle.net/rahim1384/a3g5v0em/3/)

How can I set the initial position of the scrollbar to be in the right and I can see the first column.

The following is the code in the fiddle link.

HTML
====

```
<table>
    <tr>
        <th>RTL Header 1</th>
        <th>RTL Header 2</th>
        <th>RTL Header 3</th>
        <th>RTL Header 4</th>
        <th>RTL Header 5</th>
        <th>RTL Header 6</th>
        <th>RTL Header 7</th>
        <th>RTL Header 8</th>
        <th>RTL Header 9</th>
        <th>RTL Header 10</th>
        <th>RTL Header 11</th>
        <th>RTL Header 12</th>
        <th>RTL Header 13</th>
        <th>RTL Header 14</th>
    </tr>
    <tr>
        <td>RTL Content 1</td>
        <td>RTL Content 2</td>
        <td>RTL Content 3</td>
        <td>RTL Content 4</td>
        <td>RTL Content 5</td>
        <td>RTL Content 6</td>
        <td>RTL Content 7</td>
        <td>RTL Content 8</td>
        <td>RTL Content 9</td>
        <td>RTL Content 10</td>
        <td>RTL Content 11</td>
        <td>RTL Content 12</td>
        <td>RTL Content 13</td>
        <td>RTL Content 14</td>
    </tr>
</table>

```

CSS
===

```
table {
  direction: rtl;
  font-family: Vazir;
  border-collapse: collapse;
  width: 100%;
}

th {
  direction: rtl;
  width: 100%;
  border: 1px solid #848080;
  text-align: center;
  padding: 8px;
  white-space: nowrap;
}
td{
    direction: rtl;
    width: 100%;
    border: 1px solid #848080;
    text-align: center;
    padding: 8px;
    white-space: nowrap;
}
td:last-child{
    width:100%;
}
th:last-child{
    width:100%;
}
tr:nth-child(even) {
  background-color: #dddddd;
}

```