Як змінити колір усіх чотирьох кордонів навіть з властивість border-collapse: collapse

50

Від автора: швидке вирішення проблеми, з якою багато хто з вас повинні були стикатися: властивість border-collapse працює чудово до тих пір, поки перекриття не починає заважати вам змінювати колір межі елемента. Властивість border-collapse відмінно підходить навіть для створення рамок навколо клітинок таблиці table. Таблиця виглядає чистіше, і мені це подобається.

Однак є одна проблема, яка впливає на те, як браузер розмальовує клітинки та їх межі. Під час показу кожна наступна комірка, розташована під попередньою. Тобто якщо межі в таблиці різного кольору, то деякі з граней будуть заховані під іншими.

Проблема

Наведіть курсор миші на клітинки в демо нижче, щоб подивитися, які грані приховані.

Так як властивості z-index не працює на комірках таблиці table, нам доведеться працювати з контентом цих осередків.

Рішення

Крок 1

Чесне попередження: в рішенні будуть застосовуватися негативні магдіп’и. Тим, кому не до душі негативні зовнішні відступи, пропоную відвернутися.

Спершу, необхідно додати блок-обгортку для вмісту клітинки. Потім перемістити рамку, padding і т. д. всередину контенту.

Наша проблема перекинулася з ніг на голову: нижня і права кордону тепер показуються зверху.

Крок 2

Тепер необхідно додати властивість z-index станом :hover, щоб воно розташовувалося вище інших елементів. Це спрацює, так як ми застосовуємо властивість z-index до контенту всередині комірок таблиці, а не до самих клітинок td.

Переконайтеся, що властивість z-index не бере участь в анімації з властивістю transition, інакше попередня прихована кордон буде з’являтися різко, а не плавно.