Если вам не претят прямолинейные и примитивные решения, я бы предложил след. конструкцию, потребуется небольшой JS:
HTML
<table>
<tr><th>..</th></tr>
<tbody>
<tr id="foo1" class="close" onclick='toggleClass(this,"open")'><td><div class="line-visible">..</div><div class="line-invisible">..</div></td></tr>
CSS
#foo1 .line-visible {
height: calc(1rem + (padding-top\bottom));
overflow-y: hidden; // optional
}
#foo1 .line-invisible {
width: 100%
height: 0; /* OR display: none; */
word-wrap: break-word;
overflow-y: hidden; // optional
}
#foo1.open .line-visible {
height: auto;
overflow-y: visible; // optional
}
#foo1.open .line-invisible {
height: auto; /* OR display: block; */
overflow-y: visible; // optional
}
JS
function toggleClass(el, className) {
if (hasClass(el, className))removeClass(el, className)
else addClass(el, className);
};
function hasClass(el, className) {
if (el.classList)
return el.classList.contains(className)
else
return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))
}
function addClass(el, className) {
if (el.classList)
el.classList.add(className)
else if (!hasClass(el, className)) el.className += " " + className
}
function removeClass(el, className) {
if (el.classList)
el.classList.remove(className)
else if (hasClass(el, className)) {
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
el.className=el.className.replace(reg, ' ')
}}
Процесс. Изначально скрываемый элемент
line-invisible входит в родителя TR с классом
close, передающего элементу высоту 0 (или скрытие блока), при клике на родителя TR ему добавляется класс
open , снимающий ограничения по невидимости блока. Повторный клик возвращает ситуацию к началу. Пример кода можно глянуть тут
https://antonybark.ru/patterns/js_templates/toggle....
Т.к. приведённый в примере JS не использует ниуаках библиотек, кроме браузерных, думаю что его можно как-то даже параметризовать под условия конкретного проекта, но это уже вопрос к вашим спецам по JS.
