Как лучше сверстать данный блок без js (ховер столбца с рамкой)?

Question

[smithana]

Добрый день,
получил от дизайнера макет вот с таким блоком:


Вёрстка основана на бутстрапе. На Мобильном разрешении данный блок меняется на другой.

Первая мысль - обычная таблица и вот такой способ ховера столбца:
https://css-tricks.com/simple-css-row-column-highl...
но как в данном случае реализовать рамку ховера? единственная идея с помощью js высчитать индекс ячейки и задать рамку другим ячейкам с таким же индексом, плюс проверить если это первая или последняя строка, то задать другую рамку.

Вторая мысль пусть будут колонки бутстрапа и в колонке ul>li>span. Создать css таблицу (ul - dispaly: table, li - row, span - cell).
В этом случае у нас нет проблемы ни с подсветкой столбца, ни с его рамкой. Но появляется другая проблема - li в разных списках будут разной высоты. (На макете текст одинаковой длинны, но кто его знает, что будет на реальном сайте). Уровнять высоту ячеек можно жёстко задав height. Но это тоже не есть хорошо, т.к. при большом кол-ве текста, он будет теряться.

В общем буду рад любым интересным идеям.
Спасибо!

Answer 1

[Сергей Горячев]

Три раза прочитал, ничего не понял)

В чем сложность-то? Обычный border, обычный hover.
Верстка а-ля под таблицу, делаем div'ами, применяем flexbox.

Высоту строк все равно лучше через JS ловить, чтобы не скакало.

Хотя можно извратиться конечно, сделать через жесткое задание высоты.

В мою больную голову пришло решение без JS на таблицах строками.
Но я его не буду озвучивать))) Так как увидев такое на сайте, я бы оторвал голову верстальщику)
Но решение есть :))) Без JS и с ровными блоками)))

Comments

[smithana]

Что именно не понятно?)

если верстаем div'ами, то как раз проблема с высотой ячеек. нужно чтобы все были одинаковой высоты.

Answer 2

[Максим Тимофеев]

Верстайте не строками, а колонками, родителю колонки при hover задавайте border-color
Если у Вас сверстано по другому - дайте код. Потому что по картинке сложно понять Ваш html, а описание и того сложнее.

Comments

[smithana]

Кода нет, т.к. я пока ещё прикидываю как лучше реализовать, чтобы потом не переделывать)

Ваше предложение как раз моя вторая мысль.
При вёрстке столбцами отпадают все проблемы с hover и border-color.

Но как тогда сделать чтобы строки в разных столбцах были одинаковой высоты?
Вот например последняя строка. На макете во всех ячейках один и тот же текст. А на сайте возьмут и в одном из столбцов вместо "Залог приобретаемого дома и/или земельного участка" поставят тире.
И тогда ячейка с тире по высоте станет меньше чем все остальные ячейки в этой строке, т.к. мы сверстали столбцами, и у ячеек нет связи с соседями по строке.

[Максим Тимофеев]

Но как тогда сделать чтобы строки в разных столбцах были одинаковой высоты

min-height задать или использовать js решение

[Максим Тимофеев]

Второй вариант. Верстка таблицей, а поверх маска в виде прозрачного div у которого и происходит hover

[smithana]

Максим Тимофеев: min-height не спасёт, т.к. если текста добавят больше чем было, то всё расползётся(

а вот с дивом идея вроде бы хорошая, но на ум приходит следующая проблема:
Если мы делаем div прозрачным с оранжевой рамкой, то мы не сможем сделать колонку целиком белого цвета. Т.к. замена background на белый у нас задана для hover ячейки таблицы. Но hover ячейки будет не вызвать, т.к. div всегда будет перехватывать ховер.

Попробую сверху наложить div белого цвета с оранжевым контуром, а текст из ячеек вытащить наверх с помощью z-index

[Максим Тимофеев]

smithana: Над каждой колонкой свой div с прозрачным фоном и прозрачных border, hover естественно ловит div и именно у него меняется border-color

[smithana]

Максим Тимофеев: вы забываете, что нам надо ещё поменять цвет ячеек. В обычном состоянии нечётные ячейки тёмного цвета.

[Максим Тимофеев]

smithana: тогда как вариант: дублировать контент таблицы в div или забыть про nojs решения, верстать как удобно и выносить логику hover в js

[smithana]

сейчас попробовал div, но образовалась ещё проблема:
очень сложно задать div-у ширину на 100% совпадающую со столбцом. Многие браузеры немного по разному переносят текст, так что обычным процентным соотношением тут не попасть.

Так что скорее всего придётся верстать таблицу и дальше уже с помощью js реализовывать ховер..

[Максим Тимофеев]

smithana: Столбцы таблицы указать в %, div тоже в % совпадение будет идеальным

Answer 3

[dom1n1k]

Мне кажется, чем-то жертвовать всё-таки придется.
Глобально вариантов два: либо верстать настоящей таблицей (но тогда бордер придется рисовать кусочками через JS), либо таблица верстается столбцами (обходимся чистым CSS, но есть опасность разъезжания, если где-то будет много текста).
Думаю, лучше всё-таки сделать на JS, хотя я и сам стараюсь обходиться без него по возможности.

Comments

[smithana]

тоже прихожу к этому варианту.

Если учитывать возможность отключённого js, то в данном методе мы просто теряем border, а в случае вёрстки без таблицы, у нас могут разъехаться все ячейки