如何折叠表格行？

Question

我有一张桌子，我需要折叠每一行以显示特定信息。我尝试了几种方法，但似乎没有任何效果。看起来很容易，但我做不到，该怎么办？

这是tr代码：

<tr role="row">
   <td>1</td>
   <td class="navtd"><span class="tableinfo">Curating</span></td>
   <td>The Book Affair</td>
   <td>Automatic Books</td>
   <td>2009</td>
</tr>

这是我用来折叠标题的一种方法，它工作得很好：

var acc = document.getElementsByClassName("about");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = document.getElementById("aboutPanel");
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

<section class="header">


  <div class="menu">
    <table class="nav">
      <tbody>
        <tr>
          <td style="width: 5%"></td>
          <td class="navtd" style="width: 17.5%"></span>Tommaso Speretta</td>
          <td class="navtd" style="width: 35%"><span class="about"><span>About/Contact</span></span></td>
          <td style="width: 35%"></td>
          <td style="width: 7.5%"></td>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="aboutPanel">
    <table>
      <tbody>
        <tr>
          <td style="width: 5%"></td>
          <td style="width: 17.5%"></td>
          <td style="width: 35%">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi! Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat
            a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci
            ratione, et atque velit distinctio consequuntur nisi!
          </td>
          <td style="width: 35%">
            <div><img src="img/profilepic.png" alt="Profile picture Tommaso Speretta" class="profilepic"></div>
          </td>
          <td style="width: 7.5%"></td>
        </tr>
      </tbody>
    </table>
</section>