HTML

Question

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

如何将滚动条的初始位置设置在右侧，才能看到第一列。

以下是小提琴链接中的代码。

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

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

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

last是给您的最后一个表格单元格的ID，

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

Answer 2

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

您不必在每个单独的子元素上声明 direction：rtl ，不必使用继承力并避免混淆行为。

我刚刚删除了所有子元素上的所有 direction属性，并将其应用于正确的父元素上，从而使自己的代码更干净了。

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;
}

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

HTML

CSS

2 个答案: