Від автора: швидке вирішення проблеми, з якою багато хто з вас повинні були стикатися: властивість border-collapse працює чудово до тих пір, поки перекриття не починає заважати вам змінювати колір межі елемента. Властивість border-collapse відмінно підходить навіть для створення рамок навколо клітинок таблиці table. Таблиця виглядає чистіше, і мені це подобається.
Однак є одна проблема, яка впливає на те, як браузер розмальовує клітинки та їх межі. Під час показу кожна наступна комірка, розташована під попередньою. Тобто якщо межі в таблиці різного кольору, то деякі з граней будуть заховані під іншими.
Проблема
Наведіть курсор миші на клітинки в демо нижче, щоб подивитися, які грані приховані.
Так як властивості z-index не працює на комірках таблиці table, нам доведеться працювати з контентом цих осередків.
Рішення
Крок 1
Чесне попередження: в рішенні будуть застосовуватися негативні магдіп’и. Тим, кому не до душі негативні зовнішні відступи, пропоную відвернутися.
Спершу, необхідно додати блок-обгортку для вмісту клітинки. Потім перемістити рамку, padding і т. д. всередину контенту.
Наша проблема перекинулася з ніг на голову: нижня і права кордону тепер показуються зверху.
Крок 2
Тепер необхідно додати властивість z-index станом :hover, щоб воно розташовувалося вище інших елементів. Це спрацює, так як ми застосовуємо властивість z-index до контенту всередині комірок таблиці, а не до самих клітинок td.
Переконайтеся, що властивість z-index не бере участь в анімації з властивістю transition, інакше попередня прихована кордон буде з’являтися різко, а не плавно.
