полоса прокрутки справа налево внизу таблицы html - PullRequest
Новая
       12

полоса прокрутки справа налево внизу таблицы html

0 голосов
/ 26 мая 2019

В следующей скрипте я создаю таблицу, где она должна быть справа налево. Все в порядке, за исключением того, что полоса прокрутки внизу таблицы изначально находится слева от страницы, поэтому пользователь не может видеть первый столбец.

FiddleDemo

Как установить начальную позицию полосы прокрутки так, чтобы она была справа, и я вижу первый столбец.

Ниже приведен код в ссылке на скрипку.

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

Ответы [ 2 ]

1 голос
/ 26 мая 2019

Используйте метод scrollIntoView в последней ячейке таблицы как 

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

Где last - это идентификатор вашей последней ячейки таблицы как 

<th id="last">RTL Header 1</th>
0 голосов
/ 26 мая 2019

Первое правило снятия любого фрагмента основного кода -> go 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;
}
...