Bootstrap 表格在 RTL 方向上无法正常工作

Question

我正在编写一个支持阿拉伯语的网站。我正在为我的 table 使用 bootstrap-tables，它工作得很好，但是当我改变方向到 RTL 时它不能正常工作，当我将 table header 推到调整大小，下一步 table header 调整大小。

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

Answer 1

据我所知，您使用了 bootstrap-table 和 jquery.resizableColumns 来调整列的大小。 Bootstrap-table 在 rtl 方向上工作正常，应该没有任何问题，问题出在 jquery.resizableColumns。要解决此问题，您可以自定义 jquery.resizableColumns.js，如下所示：

remove marked

remove purple marked and add green marked

Bootstrap 表格在 RTL 方向上无法正常工作

Bootstrap tables is not working currectly on RTL direction

bootstrap-table