Bootstrap tables is not working currectly on RTL direction

I'm writing a website that support arabic language. I'm using bootstrap-tables for my tables, It work very well, but when I change direction to RTL its not working currectly and when I push the table header to resiz it, next table header resize.

html:

<link href="https://unpkg.com/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/extensions/resizable/bootstrap-table-resizable.min.js"></script>  
<table dir="rtl" data-toggle="table" data-resizable="true">
  <thead>
    <tr>
      <th> th1 </th>
      <th> th2 </th>
      <th> th3 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> td1 </td>
      <td> td2 </td>
      <td> td3 </td>
    </tr>
    <tr>
      <td> td1 </td>
      <td> td2 </td>
      <td> td3 </td>
    </tr> 
    <tr>
      <td> td1 </td>
      <td> td2 </td>
      <td> td3 </td>
    </tr>
  </tbody>
<table>

js:

$(document).ready(function () {
  $(function () {
    $("#table").resizableColumns();
  });
});