Как заставить фоновый цвет красиво скользить между ячейками таблицы с помощью чистого CSS?

Question

У меня есть таблица, в которой некоторые ячейки каждой строки содержат labels и радио переключатели.

Ярлык (label) активной ячейки подсвечивается фоновым цветом, чтобы обозначить ее как активную.

Если пользователь меняет активную ячейку, я бы хотел, чтобы цвет фона скользил из текущей активной ячейки в только что выбранную ячейку.

У меня это вроде как работает при использовании псевдо элементов и transform: translateX(...); с помощью этого кода:

/* Apply sliding effect */
td {
  position: relative;
  overflow: hidden;
}

label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 0.5s ease;
  transform: translateX(100%);
  z-index: -1;
}

/* First column always exits right */
td:first-of-type label::before {
  transform: translateX(100%);
}

/* Last column always exits left */
td:last-of-type label::before {
  transform: translateX(-100%);
}

/* Selected label */
label:has(input[type="radio"]:checked)::before {
  transform: translateX(0);
}

/* Labels after the selected label always exit left */
td:has(input[type="radio"]:checked) ~ td label::before {
  transform: translateX(-100%);
}

<table>
  <tr>
    <td>
      <label>
        <input type="radio" name="row1" />
        Option 1
      </label>
    </td>
    <td>
      <label>
        <input type="radio" name="row1" />
        Option 2
      </label>
    </td>
    <td>
      <label>
        <input type="radio" name="row1" />
        Option 3
      </label>
    </td>
    <td data-column-type="other">
      <label>
        <input type="radio" name="row1" />
        Option 4
      </label>
    </td>
    <td>
      <label>
        <input type="radio" name="row1" />
        Option 5
      </label>
    </td>
  </tr>
</table>

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

Однако если щелкнуть дальше (например, от ячейки №1 до ячейки №5), то это начинает выглядеть некрасиво.

Каждая строка таблицы должна иметь свой собственный «скользящий» фон.

Есть ли способ добиться этого на чистом CSS, в идеале без дополнительных HTML-элементов?
Я предполагаю, что должен быть способ, особенно с учетом последних достижений с правилом `@property и т.д.

_{Свободный перевод вопроса Making background-color "slide" nicely between table cells using pure CSS? от участника @WackGet.}

Answer 1

Решение с использованием позиционирования anchor и :has().
Пока не готово для использования во всех браузерах, но сохраним решение на ближайшее будущее.

tr {
  position: relative;
}
tr::before {
  content: "";
  position: absolute;
  z-index: -1;
  position-anchor: --label;
  inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
  background-color: red;
  transition: 0.5s ease;
}

td:has(input:checked) {
  anchor-name: --label;
}

<table>
  <tr>
    <td>
      <label>
        <input type="radio" name="row1" />
        Option 1
      </label>
    </td>
    <td>
      <label>
        <input type="radio" name="row1" />
        Option 2
      </label>
    </td>
    <td>
      <label>
        <input type="radio" name="row1" />
        a longer option 
      </label>
    </td>
    <td data-column-type="other">
      <label>
        <input type="radio" name="row1" />
        Option 4
      </label>
    </td>
    <td>
      <label>
        <input type="radio" name="row1" />
        Op 5
      </label>
    </td>
  </tr>
  <tr>
    <td>
      <label>
        <input type="radio" name="row2" />
        Option 1
      </label>
    </td>
    <td>
      <label>
        <input type="radio" name="row2" />
        Option 2
      </label>
    </td>
    <td>
      <label>
        <input type="radio" name="row2" />
        a longer option 
      </label>
    </td>
    <td data-column-type="other">
      <label>
        <input type="radio" name="row2" />
        Option 4
      </label>
    </td>
    <td>
      <label>
        <input type="radio" name="row1" />
        Op 5
      </label>
    </td>
  </tr>
</table>

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

Как заставить фоновый цвет красиво скользить между ячейками таблицы с помощью чистого CSS?

Ответы (1 шт):