От автора: быстрое решение проблемы, с которой многие из вас должны были сталкиваться: свойство border-collapse работает замечательно до тех пор, пока перекрытие не начинает мешать вам изменять цвет границы элемента. Свойство border-collapse отлично подходит даже для создания рамок вокруг ячеек таблиц table. Таблица смотрится чище, и мне это нравится.
Однако есть одна проблема, которая влияет на то, как браузер отрисовывает ячейки и их границы. Во время отрисовки каждая следующая ячейка расположена под предыдущей. То есть если границы в таблице разного цвета, то некоторые из граней будут спрятаны под другими.
Проблема
Наведите курсор мыши на ячейки в демо ниже, чтобы посмотреть, какие грани скрыты.
Так как свойство z-index не работает на ячейках таблицы table, нам придется работать с контентом этих ячеек.
Решение
Шаг 1
Честное предупреждение: в решении будут применяться отрицательные margin’ы. Тем, кому не по душе отрицательные внешние отступы, предлагаю отвернуться.
Сперва, необходимо добавить блок-обертку для контента ячейки. Затем передвинуть рамку, padding и т.д. внутрь контента.
Наша проблема перевернулась с ног на голову: нижняя и правая границы теперь показываются сверху.
Шаг 2
Теперь необходимо добавить свойство z-index состоянию :hover, чтобы оно располагалось выше других элементов. Это сработает, так как мы применяем свойство z-index к контенту внутри ячеек таблицы, а не к самим ячейкам td.
Убедитесь, что свойство z-index не участвует в анимации со свойством transition, иначе предыдущая скрытая граница будет появляться резко, а не плавно.
Автор: Daniel Jauch
Источник: //css-tricks.com/
Редакция: Команда webformyself.