如何在JavaScript中显式设置HTML表列宽

我在JavaScript中操作HTML表时遇到了一个缩放问题

我有一个JavaScript代码blob，它从JSON数组动态创建一个表。 它修复了标题并允许表体滚动，并且工作正常

标题是一个单独的表格，我强烈控制单元格宽度，以确保标题表格的单元格与正文表格的单元格匹配

正文表格单元格的宽度都已明确设置。
我迭代表中的行，然后在循环中交互单元格，并设置每个单元格的宽度

这个迭代没有扩展，当行增长到100行，列增长到40多行时，Firefox抱怨脚本挂起或没有响应。它没有响应，因为它正忙于设置所有单元格宽度

nz.dynatable.setTableColumnWidths = function (table, arrayColumnWidths) {
    // Iterate the table and set width settings for each cell
    for (var i = 0; i < table.rows.length; ++i) {
        for (var j = 0; j < table.rows[i].cells.length; ++j) {
            var width = arrayColumnWidths[j] || 0;
            table.rows[i].cells[j].style.width = width.toString() + "px";
        }
    }
}

nz.dynatable.setTableColumnWidths=函数（表格，arrayColumnWidths）{
//迭代表格并为每个单元格设置宽度设置
对于（变量i=0；i

问：是否可以为一行中的表格设置单元格宽度，并使表格中的所有其他单元格都与此一致？Firefox是否因为更改单元格宽度而导致重新计算每个循环上的表大小而受到攻击

---

完整的代码块位于公共GitHub repo中：

试试这个：我也有同样的问题，这是帮助我：

let tables = document.getElementsByClassName("table");

if(tables.length == 2){
    let firstTableCol = tables[0].querySelectorAll('colgroup col');
    let secondTableCol = tables[1].querySelectorAll('tr')[0].querySelectorAll('td');
    if(firstTableCol.length == secondTableCol.length){
        for(let index = 0; index < firstTableCol.length; index++){
            firstTableCol[index].style.width = secondTableCol[index].offsetWidth + "px";
        }
    }else
        console.log('cols count mismatch');
}else
    console.log('count of tables are bigger than 2');

let tables=document.getElementsByClassName（“表”）；
如果（tables.length==2）{
设firstTableCol=tables[0]。querySelectorAll（'colgroup col'）；
设secondTableCol=tables[1]。querySelectorAll（'tr'）[0]。querySelectorAll（'td'）；
if（firstTableCol.length==secondTableCol.length）{
for（让index=0；index

我尝试了几种给这只猫剥皮的方法，下面是我的发现。最终的解决方案非常干净，性能也很好，我在Chrome上测试了一些警告，而不是在其他浏览器上测试，并且使用了中等大小（但不是很大）的表。总而言之，使用css（如到以下）将第5列设置为宽度70，并使用javascript修改该css：

table#my_table th:nth-child(5), table#my_table td:nth-child(5){ max-width:70px; min-width:70px;}

更多详情：

• 您需要同时设置min width和max width，以避免您不想调整大小的列执行古怪的操作，从而保持表大小不变

• 您可以使用element.style.xxxWidth来实现这一点，但OP中提到的简单方法（如OP中的方法）不能很好地扩展
  • 处理这个问题的一种方法是只更新可视区域中的元素（我们称之为“可视区域方法”）。您可以通过比较父对象和正在检查的对象的parent.getBoundingClientRect（）结果来实现这一点（参见示例）
  • 只要对getBoundingClientRect（）的调用（代价高昂）保持在最低限度（即每列一次，而不是每单元格一次），我就能很好地实现这一点。因为我不想维护更新和未更新单元格的缓存，所以在更新可视单元格后，我会使用异步函数调用更新不可视单元格。这样，用户界面看起来更具响应性，即使它仍在后台工作
• 但是，任何涉及直接更改element.style.xxxWidth的内容都会让人感觉混乱，尤其是在不得不添加代码以仅更新可视元素之后。此外，尽管这一变化使性能大大提高，但它仍然可能是次优的。因此，我最终使用的最终解决方案是执行以下操作（我们称之为“动态样式表方法”）：
  • 假设每个表都有一个唯一的元素ID
  • 通过为每列创建新样式（

    document.createElement（'style'）

    ）初始化表。包含一条规则的样式，该规则将仅为具有该ID的表选择该列，例如，对于具有ID“my_table”的表，第5列（cellIndex 4）将宽度设置为70：

    table#my_table th:nth-child(5), table#my_table td:nth-child(5){ max-width:70px; min-width:70px;}
    

  • 将新创建的styleElements添加到table元素（而不是文档），这样，如果从DOM中删除表，这些额外的样式也会消失

  • 要更改列宽，唯一需要更改的是相关styleElement的规则0的maxWidth/minWidth片段（注意，您也可以使用具有多个规则的单个样式表来执行此操作，但我发现使用每个列一个单独的样式表，每个列一个规则更容易）

总的来说，在我看来，使用动态样式表方法是赢家，原因如下：

• 在OP中描述的“幼稚”方法下，它可以很好地处理大到足以产生性能问题的表（尽管我没有比较其他方法在非常大的表上的性能）
• 它是干净的：不需要任何元素。样式更改，并且不会使基本文档DOM混乱，因为相关的样式元素已附加到相关表（需要测试跨浏览器）
• 如果它的性能还没有被浏览器自动优化，那么它的设计应该让性能挑战由浏览器来处理，从而使优化变得简单

---

您试过只做第一排吗？这是正常的餐桌行为。是的，这是老派的把戏，只需在第一行设置宽度——并祈祷没有涉及Colspan：P有人再使用colgroup吗？没有Colspan，这一切都在我的控制之下。将让第一排开始，如果这样做有效，它将加快你的速度