目前 0 思路,请各位大佬支招, 当 table 超出上一个 div 的高度的时候,剩余的文字依序显示下一个 div

js / css 如何实现这种布局?

一般来说我会使用断页的方式，直接给 <tr> 元素添加一个 break-inside: avoid-page 让整行内容出现在下一页，这样就能把保证所有的内容连贯了。
类似与这样：
图片.png
具体思路可以看我的这篇笔记 👉 HTML API + CSS 控制页面打印内容和样式
主要就是使用到了 👉 break-inside - CSS | MDN

当然也可以直接按照OP你的需求来，表头使用 position:fixed 来固定到顶部，然后给页面增加一个 padding-top 这个内填充高度就是表头的高度。这样被断页的行内容就会拼接在表头后方了。

Edit

第一种方式的在线Demo👇
整个TR折断到下一行的简例

第二种方式我也去尝试了一下。但是因为兼容性的问题，没有办法给每一页设置一个 padding-top 只能通过 @page 来设置一个 margin-top。
但这样就没有办法把表头固定在顶部了，会被超出裁切掉。
如果是一个特别长的 table 的话，需要借助JS来判断，但是会很复杂因为没有一个明确的断页信息可以判断，只能按照打印的纸张大小来计算。

所以我的评估是使用第一种方式，这样开发成本会比较低。

用DOMContentLoaded事件写了一简单的Demo:

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/DOM...

    window.addEventListener('DOMContentLoaded', function () {
    console.log(12);
    let parentDiv = document.getElementById('parentDiv');
    let contentDiv = document.getElementById('contentDiv');
    let nextDiv = document.getElementById('nextDiv')
    // 大于父盒子代表超出, 进行截取, 将拿到的数据放入下一个盒子
    if (contentDiv.offsetHeight > parentDiv.offsetHeight) {
      let remainingText = contentDiv.innerHTML.substr(parentDiv.offsetHeight);
      contentDiv.innerHTML = contentDiv.innerHTML.substr(0, parentDiv.offsetHeight);
      nextDiv.innerHTML = remainingText;
    }
  });

<body>
  <div id="parentDiv" style="height: 200px; overflow: hidden;">
    <div id="contentDiv">
      这里是文本内容
    </div>
  </div>

  <div id="nextDiv"></div>
</body>

js / css 如何实现这种布局?

Edit

遇到一道设计模式的面试题，各位大佬看下如何解决,题目要求是优化这段业务代码？

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

网站的不同域名互相跳转如何保持登录态？

如何在浏览器开发者工具中导入本地JS文件并直接运行？