Можете ли вы сделать позицию: липкую палку в исходной позиции элемента? - PullRequest
Новая
       15

Можете ли вы сделать позицию: липкую палку в исходной позиции элемента?

0 голосов
/ 03 августа 2020

У меня есть таблица, которая слишком длинна, чтобы поместиться в ее контейнер. Я установил overflow-x: auto для родительского элемента, чтобы вы могли прокручивать и видеть все значения в таблице. Теперь я хочу, чтобы первые два столбца таблицы оставались с левой стороны контейнера. Я могу установить position: sticky для этих ячеек, что отлично работает, за исключением того, что я должен указать точку, в которой они придерживаются. Если я не знаю ширину первого столбца, могу ли я приклеить к нему второй столбец? Установка left: 0 для обоих столбцов приведет к их перекрытию, что нежелательно.

Я хочу, чтобы первый и второй столбцы располагались рядом, как они изначально появляются, но они остаются там, когда пользователь прокручивает строку стол. Я бы сгруппировал ячейки вместе в один липкий элемент, но это не разрешено спецификацией HTML (tr может иметь только td / th потомков). В идеале я хочу установить что-то вроде "left: initial", чтобы каждый элемент оставался в той позиции, с которой он начинается.

Как лучше всего реализовать это, используя CSS? 

.container {
  overflow-x: auto;
  width: 100px;
}

.stick {
  position: sticky;
  left: 0px;
}
<div class="container">
  <table>
    <thead>
      <tr>
        <th class="stick">Team</th>
        <th class="stick">Name</th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>...</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="stick">Blue</td>
        <td class="stick">Gary</td>
        <td>8</td>
        <td>12</td>
        <td>4</td>
        <td>0</td>
        <td>...</td>
      </tr>
      <tr>
        <td class="stick">Red</td>
        <td class="stick">Sam</td>
        <td>7</td>
        <td>11</td>
        <td>5</td>
        <td>2</td>
        <td>...</td>
      </tr>
      <tr>
        <td class="stick">Red</td>
        <td class="stick">Joe</td>
        <td>2</td>
        <td>4</td>
        <td>0</td>
        <td>0</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>
...