Max-Höhe der Tabellenzeile mit reinem HTML + CSS

Question

Ich habe eine Tabelle mit Bestellungen. Einige Zellen enthalten Symbole, einige enthalten Text und einer enthält eine Tabelle. Die letzte Zelle enthält einen langen Text, der innerhalb einer <div> mit overflow:auto angezeigt wird.

Ich möchte die max-height dieser <div class="textDiv"> gleich der höchsten Zelle in der Zeile sein. Zur Zeit mache ich es mit jQuery:

• ich machen die Tabelle mit dem <div class="textDiv" style="display:none;">

• dann verwende ich jQuery, nachdem der Inhalt geladen wird:

  $('.textDiv').each(function (i, obj) { 
      $(obj).css('max-height', $(obj).parent().height() + 'px').css('display', 'block'); 
  }); 
  

Gibt es eine reine HTML + CSS Weg dies zu tun?

Answer 1

var divs = document.getElementsByCalssName("textDiv"); 
for (var i = 0; i < divs.length; i++) 
{ 
    divs[i].style.maxHeight = divs[i].parentElement.style.height; 
    // or window.getComputedStyle(divs[i].parentElement, null).height; 
    divs[i].style.display = "block"; 
}