javascript - 具有扩展 div 的表与下一行重叠？

Question

我想创建一个表，其中每个 <td>包含一个可以扩展的 div，但问题是表行不随 div 扩展。下面是我的示例代码:

document.querySelector('.expand').addEventListener('click', () => {
  let additionalInfo = document.querySelector('.additional-info');
  if (additionalInfo.style.display === 'none') {
    additionalInfo.style.display = "block";
    additionalInfo.style.maxHeight = additionalInfo.scrollHeight + "px";
  } else {
    additionalInfo.style.display = "none";
    additionalInfo.style.maxHeight = 0 + "px";
  }
});

.main-info {
  width: 650px;
  height: 150px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.additional-info {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  display: none;
}

<div>
  <div>
    <input type="text"></input>
  </div>
  <div>
    <table>
      <tr>
        <td>
          <div class="main-info">
            <div class="expand">Expand</div>
            Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
            <div class="additional-info">
              Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional
              Information!<br> Some additional Information!
            </div>
          </div>
        </td>
      </tr>


      <tr>
        <td>
          <div class="main-info">
            <div class="expand">Expand</div>
            Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
            <div class="additional-info">
              Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional Information!<br> Some additional
              Information!<br> Some additional Information!
            </div>
          </div>
        </td>
      </tr>


    </table>
  </div>
</div>

这是 td 元素:

<td>
    <div class="main-info">
        <div class="expand">Expand</div>
        Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
    <div class="additional-info">
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!
    </div>
    </div>
</td>

基本上，当 additional-info div 变为可见，它与下一行的内容重叠。我注意到如果additional-info div 不是 main-info 的一部分但作为它自己的元素添加到 td 中，该行很好地展开:

<td>
    <div class="main-info">
        <div class="expand">Expand</div>
        Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
    </div>

    <!-- additional-info is separate from main-info -->
    <div class="additional-info">
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!<br>
        Some additional Information!
    </div>
</td>

有没有办法获得相同的行为但保留 additional-info div 作为 main-info 的一部分分区？我不想使用 JQuery 等其他库，而只是使用 vanilla JS 和 HTML/CSS。

Answer 1

更改类主要信息来自

.main-info {
    width: 650px;
    height: 150px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

到

.main-info {
    width: 650px;
    min-height: 150px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

col 会很好地扩展