如何使滚动条自动位于内容的中心或右侧？

Question

我有一张使用Bootstrap'stable-responsive 类的表格，以便将其放在移动屏幕上。此剪辑所有 x 轴溢出数据并利用 CSS overflow-x 属性添加滚动条。

由于我的表格内容是希伯来语，表格内容被剪掉了错误的方式。保持可见的内容应该被隐藏。我来了

而不是这个：

如何使滚动条出现在内容的右侧或中心而不是左侧？ （滚动条在图片中不可见，因为它在移动设备上。）

下面的代码重现了我的问题：

table
{
  max-width: 250px;
  overflow-x: auto;
 }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table-responsive table">
  <tr>
    <td>data point</td>
    <td>data point</td>
    <td>data point</td>
    <td>data point</td>
    <td>data point</td>
    <td>data point</td>
    <td>data point</td>
    <td>
      <form>
        <input type="submit">
      </form>
    </td>
  <tr>
</table>

Answer 1

如果我正确理解了这个问题，我想你想用这个来指定方向：dir="rtl"

table
{
  max-width:250px;
  overflow-x:auto;
 }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table-responsive table"  dir="rtl">
  <tr>
    <td>data point</td>
    <td>data point</td>
    <td>data point</td>
    <td>data point</td>
    <td>data point</td>
    <td>data point</td>
    <td>data point</td>
    <td>
      <form>
        <input type="submit">
      </form>
    </td>
  <tr>
</table>