Как в таблицу добавить блок, растягивающийся на ширину нескольких других ячеек?

Question

[weranda]

Привететвую.
Таблицы — это такая сложная штука. Уже час думаю над реализацией.

Есть таблица, во второй ячейке есть текст, его нужно спозиционировать на всю ширину 3–5 ячеек без добавление дополнительных строк с colspan=X, так как таблица будет сортироваться по всем столбцам, кроме второго. Вот пример:


А тут код: https://codepen.io/weranda/pen/MWKwVma Но код фиксированный, он не учитывает того, что ширина таблицы может быть и другой, но показывает то, как визуально хотелось бы чтобы таблица работала. Пока пришел только...ни к чему не пришел. Подскажите возможные реализации.

Comments

[Jan van Eyck]

Задача не особо понятно сформулирована. Шанс получить полезный ответ заметно возрастет, если свои мысли более четко изъясните.
Т.е. текст должен фактически находиться во 2-й колонке, а отображаться с 3 по 5-ую чтоли?

[weranda]

threezadoozy, Да, вы правильно поняли.

Answer 1

[Jan van Eyck]

Подскажу возможную реализацию. Все как вы просили ; )

Элемент с текстом спозиционировать абсолютно и "прилепить" его к правому-нижнему углу строки, задать ширину, равную общей ширине 3-х ячеек. Для строки добавить position: relative, чтобы можно было к его границам привязаться. Чтобы выделить место под этот (сдвинутый) элемент, можно добавить padding для строки/ячейки.
Если объем этого текста в разных строках будет сильно отличаться, то придется подобрать оптимальную высоту (что-то среднее). Длинные тексты - скрывать, что не помещается через (...) Если видимость всего текста критична, то добавить скролл и застилизовать едва заметную полосу прокрутки. Хотя вроде как затронет скролл для страницы в целом :-/

Дальше уже требуется отладка через реальный код, на словах и на пальцах навряд ли получится придумать законченное решение (если конечно не владеете версткой на божественно-запредельном уровне).

Разумеется это хак (слово не пугает?..). А как иначе, задача не тривиальная.
Для кого-то хак, для другого костыль - вопрос отношения.