Нужно поправить CSS для ячейки таблицы, чтобы border не распространялся на другую ячейку?

Question

[Ernest Faizullin]

Ссылка на фиддл https://jsfiddle.net/vcwg38ot/1/

По нажатии на ячейку таблицы, она становится активной. Активная ячейка таблицы должна быть выделена бордером, но если у прилегающей ячейки есть colspan или rowspan, граница активной ячейки распространяется на всю длину прилегающей ячейки.

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

UPD: Outline помогает, но тогда левый и верхний outline выступают за пределы ячейки. Причем если менять оффсет, то он меняется для всех границ сразу, то есть нельзя поменять оффсет только слева и сверху https://jsfiddle.net/vcwg38ot/11/

UPD: Похоже, что это баг хрома, потому что в Mozilla работает норм. Однако, проблема в Chrome решена, задав таблице border-collapse: separate; Теперь все выглядит красиво https://jsfiddle.net/vcwg38ot/18/. Всем спасибо!

Answer 1

[Александр Таратин]

Используйте outline вместо border

htmlbook.ru/css/outline
htmlbook.ru/css/outline-offset

Comments

[Ernest Faizullin]

Но тогда левый и верхний outline выступают за пределы ячейки. Причем если менять оффсет, то он меняется для всех границ сразу, то есть нельзя поменять оффсет только слева и сверху

[Александр Таратин]

erniesto77: https://jsfiddle.net/QW01_01/vcwg38ot/17/

[Ernest Faizullin]

Александр Таратин: спасибо!