У меня есть ручная таблица в LWC Playground

Я хочу исправить первый левый столбец таблицы, я попытался исправить ячейку, прикрепить положение и CSS ниже, но все равно не повезло

.table tr td:first-child {
      position:sticky;
      z-index: 1
}

Может кто-нибудь предложить, как я могу исправить первый левый столбец, как показано на игровой площадке? Opportunity Name должен быть зафиксирован в горизонтальной прокрутке.

1
Oleh Berehovskyi 26 Дек 2019 в 18:09

1 ответ

Лучший ответ

Попробуйте этот селектор css:

table tr>th:first-child
/* or .slds-table tr>th:first-child */ {
  position: sticky;
  z-index: 1;
  top: 0;
  left: 0;
}

Селектор элемента идет без предшествующего знака точки .

Липкое позиционирование — это гибрид относительного и фиксированного позиционирования. Элемент считается с относительным позиционированием до тех пор, пока он не пересечет указанный порог, после чего он считается с фиксированным позиционированием. Вы должны указать пороговое значение хотя бы с одним из top, right, bottom или left, чтобы закрепленное позиционирование работало должным образом. В противном случае оно будет неотличимо от относительного позиционирования.

Липкое позиционирование

5
Oleh Berehovskyi 26 Дек 2019 в 18:05
Спасибо за ваш ответ, он работает, как и ожидалось, на игровой площадке, но в режиме реального времени он работает только с заголовком столбца, а не с данными под заголовком, и у меня есть 2 таблицы на моей странице, и указанное выше исправление заголовка первого столбца для обоих таблицы, и мне нужно исправить только одну из них, не могли бы вы подсказать
 – 
gs650x
26 Дек 2019 в 18:52
Предоставьте ссылку на код игровой площадки, тогда я смогу предложить исправление)
 – 
Oleh Berehovskyi
26 Дек 2019 в 18:56
Детская площадка упоминается в вопросе, но на детской площадке она работает нормально :(
 – 
gs650x
26 Дек 2019 в 18:56
1
Просто попробуйте сделать свои селекторы CSS более конкретными. Например, добавьте некоторый пользовательский класс в целевую таблицу и перепишите селектор так, чтобы он применялся только к этой таблице. Инспектор отладки Chrome может вам очень помочь.
 – 
Oleh Berehovskyi
26 Дек 2019 в 19:08
Но он исправляет только заголовок столбца, а не данные :(
 – 
gs650x
26 Дек 2019 в 19:12