right to left scrollbar at the bottom of the table html

Question

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

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;
}

Answer 1

Use the scrollIntoView method on the last cell of the table as

document.getElementById("last").scrollIntoView();

Where last is the id given to your last table cell as

<th id="last">RTL Header 1</th>