table html 底部从右到左的滚动条

Question

在下面的 fiddle 中，我创建了一个 table，我需要它从右到左。一切都很好，只是 table 底部的滚动条最初位于页面左侧，因此用户看不到第一列。

如何设置滚动条的初始位置在右边，我可以看到第一列。

下面是fiddle中的代码 link.

HTML

<table>
    <tr>
        <th>RTL Header 1</th>
        <th>RTL Header 2</th>
        <th>RTL Header 3</th>
        <th>RTL Header 4</th>
        <th>RTL Header 5</th>
        <th>RTL Header 6</th>
        <th>RTL Header 7</th>
        <th>RTL Header 8</th>
        <th>RTL Header 9</th>
        <th>RTL Header 10</th>
        <th>RTL Header 11</th>
        <th>RTL Header 12</th>
        <th>RTL Header 13</th>
        <th>RTL Header 14</th>
    </tr>
    <tr>
        <td>RTL Content 1</td>
        <td>RTL Content 2</td>
        <td>RTL Content 3</td>
        <td>RTL Content 4</td>
        <td>RTL Content 5</td>
        <td>RTL Content 6</td>
        <td>RTL Content 7</td>
        <td>RTL Content 8</td>
        <td>RTL Content 9</td>
        <td>RTL Content 10</td>
        <td>RTL Content 11</td>
        <td>RTL Content 12</td>
        <td>RTL Content 13</td>
        <td>RTL Content 14</td>
    </tr>
</table>

CSS

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

th {
  direction: rtl;
  width: 100%;
  border: 1px solid #848080;
  text-align: center;
  padding: 8px;
  white-space: nowrap;
}
td{
    direction: rtl;
    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;
}

Answer 1

在 table 的最后一个单元格上使用 scrollIntoView 方法作为

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

其中 last 是您最后一个 table 单元格的 ID，因为

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

Answer 2

删除任何可维护代码的第一条规则 -> DRY，这意味着不要重复自己。

您不必在每个 子元素 上声明 direction: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;
}

table html 底部从右到左的滚动条

right to left scrollbar at the bottom of the table html

html

css

html-table

right-to-left

HTML

CSS