如何实现RTL表格横向滚动从右侧开始且垂直滚动条在右侧？

你可以通过两种方式实现需求，避免direction: rtl对垂直滚动条位置的影响：

方法一：JavaScript 主动定位滚动位置 #

保持容器默认的ltr方向（垂直滚动条自然在右侧），通过JS在页面加载时将横向滚动条直接定位到最右侧：

修改后的 CSS #

.table-container {
  display: flex;
  justify-content: center;
  max-height: 100px;
  max-width: 100px;
  overflow-x: scroll;
  overflow-y: scroll;
}

table,
th,
td {
  border: 1px solid black;
}

HTML 保持不变 #

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Hello</td>
        <td>World</td>
        <td>!!!</td>
      </tr>
      <tr>
        <td>Hello</td>
        <td>World</td>
        <td>!!!</td>
      </tr>
      <tr>
        <td>Hello</td>
        <td>World</td>
        <td>!!!</td>
      </tr>
      <tr>
        <td>Hello</td>
        <td>World</td>
        <td>!!!</td>
      </tr>
    </tbody>
  </table>
</div>

添加 JavaScript #

document.addEventListener('DOMContentLoaded', function() {
  const container = document.querySelector('.table-container');
  // 将横向滚动条定位到最右侧
  container.scrollLeft = container.scrollWidth - container.clientWidth;
});

方法二：纯 CSS 分离方向设置 #

给表格单独设置direction: rtl实现横向滚动默认显示最右侧，容器保持ltr确保垂直滚动条在右侧；如果不需要表格内容的RTL排版，再给单元格重置方向：

CSS 代码 #

.table-container {
  display: flex;
  justify-content: center;
  max-height: 100px;
  max-width: 100px;
  overflow-x: scroll;
  overflow-y: scroll;
  direction: ltr; /* 容器保持LTR，垂直滚动条在右侧 */
}

table {
  direction: rtl; /* 表格设置RTL，横向滚动默认从右侧开始 */
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  direction: ltr; /* 重置单元格方向，保持内容正常排版 */
}

HTML 保持不变 #

（和上述HTML代码一致）

这两种方法都能满足你的需求：横向滚动默认显示最右侧列，同时垂直滚动条保留在容器右侧。

内容的提问来源于stack exchange，提问作者Hel