Граница фокуса на ячейке сетки с переполнением: скрыта ⇐ Html

[Anonymous]

Я пытаюсь нарисовать границу фокуса в ячейке сетки.

• Сначала я попробовал контур со смещением. Почти идеально, но левая и верхняя границы не закрыты.
• Затем я попробовал использовать тени блока (также со вставкой). Здесь я попытался добавить к ячейке несколько теней, но мне не удалось покрыть правый и нижний края. Наверное, потому что тень всегда начинается после рисования границы.
• Затем я попробовал использовать псевдоэлемент after. Это дает правильный результат, но только если я установил для переполнения значение скрытое. Но мне нужно это для каждой ячейки. Я мог бы создать еще один div внутри каждой ячейки и, возможно, дать этому divs overflow: Hidden, но я не хочу этого делать, потому что это приведет к ненужному дублированию элементов ячейки.

Моя цель — иметь границу фокуса, которая не влияет и не смещает макет (поэтому простое рисование границ с большей шириной не подходит) и которая покрывает внешние границы с каждой стороны, а также 1 пиксель в ячейке с каждой стороны. Может быть, тоже хорошо, если лишний 1 пиксель окажется снаружи. Я еще не пробовал, как это будет выглядеть.

Код: Выделить всё

.row {
background-color: #ffff;
display: grid;
grid-template-columns: 100px 100px 100px 100px 100px;
grid-column: 1 / -1;
}

.cell {
border-right: 1px solid #ddd;
border-bottom: 1px solid #ccc;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
white-space: nowrap;
padding: 2px;
font-size: 14px;
}

.container {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
width: 500px;
position: absolute;
top: 50px;
left: 100px;
}

.active {
outline: 2px solid blue;
outline-offset: -2px;
}

.active2 {
position: relative;
overflow: visible;
}

.active2::after
{
content: "";
position: absolute;
inset: 1px;
box-shadow: 0 0 0 2px blue;
pointer-events: none;
}

Код: Выделить всё

row 1 cell 1
row 1 cell 2
row 1 cell 3
row 1 cell 4
row 1 cell 5


row 2 cell 1
row 2 cell 2
row 2 cell 3
row 2 cell 4
row 2 cell 5


row 3 cell 1
row 3 cell 2
row 3 cell 3
row 3 cell 4
row 3 cell 5

Подробнее здесь: https://stackoverflow.com/questions/798 ... low-hidden