html表格底部从右到左的滚动条

在下面的提琴中，我创建了一个表格，我需要它从右到左。 一切正常，只是表格底部的滚动条最初位于页面左侧，因此用户无法看到第一列

如何将滚动条的初始位置设置为右侧，并可以看到第一列

以下是fiddle链接中的代码

HTML

---

在表格的最后一个单元格上使用

scrollIntoView

方法

document.getElementById("last").scrollIntoView();

其中，

last

是作为

<th id="last">RTL Header 1</th>

RTL头1

取下任何一段主表代码的第一条规则->去晾干，这意味着不要重复自己的操作

您不必在每个子元素上都声明方向：rtl，利用继承，避免混淆行为

我刚刚通过删除每个子元素上的所有方向属性，并将其应用于正确的父元素，使您自己的代码更干净，现在它可以按预期工作

table {
  font-family: Vazir;
  border-collapse: collapse;
  width: 100%;
}

th {
  width: 100%;
  border: 1px solid #848080;
  text-align: center;
  padding: 8px;
  white-space: nowrap;
  direction: rtl; --> this is enough alrady :)
}

td {
  width: 100%;
  border: 1px solid #848080;
  text-align: center;
  padding: 8px;
  white-space: nowrap;
}

td:last-child {
  width: 100%;
}

th:last-child {
  width: 100%;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

---

谢谢我希望表格从右向左，这样RTL头1应该在右边，而不是左边。

<th id="last">RTL Header 1</th>

table {
  font-family: Vazir;
  border-collapse: collapse;
  width: 100%;
}

th {
  width: 100%;
  border: 1px solid #848080;
  text-align: center;
  padding: 8px;
  white-space: nowrap;
  direction: rtl; --> this is enough alrady :)
}

td {
  width: 100%;
  border: 1px solid #848080;
  text-align: center;
  padding: 8px;
  white-space: nowrap;
}

td:last-child {
  width: 100%;
}

th:last-child {
  width: 100%;
}

tr:nth-child(even) {
  background-color: #dddddd;
}