如何从 JavaScript 调整表格列的宽度

Posted 2023-03-11

【中文标题】如何从 JavaScript 调整表格列的宽度

【英文标题】：How to resize table columns width from JavaScript

【发布时间】：2010-10-22 21:26:41

【问题描述】：

我的 javascript 有问题。 我有一个存储在 TabList 中的表格单元格列表。 我想找到最大宽度，然后将此宽度设置为所有这些。 示例代码在这里，但宽度的设置不起作用。

var MaxTabWidth = 0;
for (var i = 0; i < TabList.length-1; i++)

  if (TabList[i].offsetWidth>MaxTabWidth) 
    MaxTabWidth = TabList[i].offsetWidth;


for (var i = 0; i < TabList.length-1; i++)

  TabList[i].style.width = MaxTabWidth+"px";
  // TabList[i].width = MaxTabWidth+"px";
  // TabList[i].offsetWidth = MaxTabWidth+"px";

我已经评论了我的尝试.. 有什么帮助吗？ This 没有为我做这个伎俩..

更新： 我确信 TabList 是一个单元列表，因为我正在检查类名。 我一直循环到 TabList.length-1，因为我希望最后一个单元格填充表格的其余宽度。

【参考方案1】：

我建议您从页面中删除所有 css/样式并对其进行测试以隔离问题。像这样的事情经常被 css 复杂化。

【参考方案2】：

对于它的价值，在 jQuery 中，这可以通过以下脚本完成，其中您的表的 id 为“myTable”。如果您对环境有足够的控制权以添加到框架中，我强烈推荐它，因为它使此类任务变得更加容易。

    var maxWidth = 0;

    $("#myTable td").each(function() 
        if ($(this).width() > maxWidth) 
            maxWidth = $(this).width();
        
    );
    $("#myTable td").width(maxWidth);

【参考方案3】：

如果将整个表格的宽度设置为 --i*MaxTabWidth。这会均匀分布列吗？假设您的表名为 myTable。

document.getElementById('myTable').width = new String(--i*MaxTabWidth)

编辑：也不会

for (var i = 0; i < TabList.length-1; i++)

通过在 TabList.length-2 处停止来跳过最后一列？