right to left scrollbar at the bottom of the table html - 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>

Answer 2

First rule of taking any piece of maintable code down -> go DRY, which means do not repeat yourself.
You do not have to state direction:rtl on every single child element, make use of the inheritance and avoid confusing behaviors.
I've just made your own code cleaner by removing all those direction properties on every child element and having it exerted on the correct parent element, and now it works as expected.
table {
font-family: Vazir;
border-collapse: collapse;
width: 100%;
}
th {
width: 100%;
border: 1px solid #848080;
text-align: center;
padding: 8px;
white-space: nowrap;
direction: rtl; --> this is enough alrady :)
}
td {
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;
}