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

Question

我有一个 table 正在使用 Bootstrap's table-responsive class 以适应移动屏幕。此剪辑所有 x 轴溢出数据并添加滚动条利用 CSS overflow-x 属性.

由于我的 table 内容是希伯来语，因此 table 内容被错误地截断了。保持可见的内容应该被隐藏。我得到

而不是这个：

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

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

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>

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

How can I make a scrollbar automatically be in the center or right side of content?

html

css

html-table

responsive

hebrew