Javascript 如何实现datatables.js那样的行折叠？

我想实现数据表的响应行为，即当表的宽度减小到某个点（基本上是tr的元素溢出发生的点）之后隐藏列

我知道如何折叠行：只需在调整窗口大小时，检查表的宽度是否大于其容器（表包装器）的宽度。发生这种情况时，我会隐藏最外层的表列并将其放在堆栈中，同时将这些值添加到每个行扩展部分（将切换为可见，就像datatables那样）

如果在窗口较小时访问网站，加载表时可以检查溢出条件（table.width>table wrapper.width），并迭代最外层的列，隐藏它们并将它们推到堆栈中，直到溢出条件为false

但是，我如何将这些元素带回来？也就是说，当表增长时，我不确定在什么情况下可以从堆栈中弹出列并取消隐藏它们

我正在考虑以某种方式获得表的最小大小，在调整窗口大小时，检查包装宽度是否大于表的最小大小加上堆栈上第一项的最小大小？但是，我不知道如何获得这些最小宽度

有没有可靠的方法可以获得任何字体大小的最小宽度，或者有没有更好的方法可以推荐

<table class="test">
     <tbody>

         <tr>
           <th> heading1 </th>
           <th> heading2 </th>
           <th> heading3 </th>
           <th> heading4 </th>
         </tr>
       
         <tr>
             <td>data1</td>
             <td>data2</td>
             <td>data3</td>
             <td>data4</td>
         </tr>

          <tr>
             <td>data1</td>
             <td>data2</td>
             <td>data3</td>
             <td>data4</td>
         </tr>

     </tbody>

</table>

标题1
标题2
头3
头4
数据1
数据2
数据3
数据4
数据1
数据2
数据3
数据4

*更新：

我认为这是一个非常不公平的解决方案，我可以将表的一个不可见副本直接放在它后面，在触发窗口调整大小事件时，我可以不断地向不可见表添加一个不可见的列，并检查溢出情况（table_border>wrapper_border）。这似乎真的很低效，虽然

我还了解到元素的最小宽度是未定义的。但是，可以在每个具有最小宽度的元素内放置一个或。对于每列，最小长度等于具有最大长度的。所以，我想我可以检查每一列的所有数据，这样得到最小长度。表的最小宽度是我需要确定的，以确定添加另一列是否会导致溢出

---

你怎么想；您还有其他想法吗？

一种方法是在表格单元格中使用

空白：nowrap

元素获取数据，并计算每行的最小宽度，即行数据元素的最大宽度。当表格中充满数据（加载或重新创建数据）时，这些“断裂宽度”仅计算一次。有了这些“中断宽度”，我们可以计算表的最小宽度，并将其与主体客户端宽度进行比较，并在调整窗口大小时相应地隐藏列

计算“断裂宽度” 这是在加载时或每次使用新数据更新时间表时执行的（即分页页面更改）。我们遍历了表单元格元素TH和TD，存储了span元素中最大的单元格文本宽度

函数calcBreakWidths（）{
//每列有一个基本索引
设thIndex=1；
for（让document.querySelectorAll（'thead th'）的第th个）{
//获取每个第TH列的每个文本跨度的宽度，
//这样，我们也将有标题中断宽度
让breakWidth=document.querySelector（`thead th:n个子（${thIndex}）>span`）。offsetWidth；
//检查所有列TD元素，并保持最大的文本跨度宽度
for（让document.querySelectorAll的span（`tbody td:n个子（${thIndex}）>span`）{
如果（跨度偏移网络宽度>特征宽度）{
breakWidth=跨度偏移网络宽度；
}
}
//将最大文本跨度打断宽度保存到TH数据集
th.dataset.breakwidth=breakwidth；
//下一列索引
thIndex++；
}
}

在调整窗口大小时隐藏/显示列 在

window.resize

中，我们通过将所有打断宽度相加来计算表的最小宽度。然后我们从最右边的一列开始遍历每一列，并检查包括当前列在内的表的最小宽度是否超过了主体客户端宽度；如果有，则隐藏当前列，否则显示当前列。这是通过使用

classList来完成的。添加
和
classList。使用名为
hidden的类和
display:none
CSS样式删除
。在每个列迭代结束时，我们从表的最小宽度中减去当前的分栏宽度，以便得到下一个正确的表最小宽度，而不使用当前的分栏宽度

window.addEventListener（'resize'，function（）{
const bodyWidth=document.body.clientWidth；
//从TH元素数据集中获取所有列的分隔宽度
常量宽度=[…document.querySelectorAll（'th'）]
.map（th=>parseInt（th.dataset.breakwidth））；
//将所有分栏宽度（+2像素）相加，以计算表的最小宽度
设tableMinWidth=宽度
.reduce（（总的，breakWidth）=>total+breakWidth+2,0）；
对于（让列=breakWidths.length；列>0；列--）{
const tableIsLarger=tableMinWidth>bodyWidth；
//const th=document.querySelector（`th:n个子（${column}）`）；
const cells=document.querySelectorAll（`th:nth child（${column}），td:nth child（${column}）`）；
//如果表格最小宽度大于主体客户端宽度，
//然后隐藏当前列
如果（tableMinWidth>bodyWidth）{
//我们通过迭代每个表单元格来隐藏列
//并且仅当列尚未包含时才添加隐藏类
//隐藏类。我们这样做是为了性能