Javascript 动态html表中的宽度差异

我面临的问题如下。我已经编写了一个JavaScript函数来创建一个可滚动的表。我使用JavaScript的原因是为了避免CSS带来的跨浏览器兼容性问题。由于表行的数量非常有限，最多为40行，因此使用JavaScript的开销似乎没有问题。代码如下所示：

function correctTableHeaderSize(){
    var count = 0;
    var sizes = [];
    $("#table").find("th").each(function(){
        sizes[count] = $(this)[0].clientWidth;
        count++;
    });
    $("#table").find("tbody").children("tr").each(function(){   
        counter=0;
        $(this).children("td").each(function(){
            if($(this).next().is("td")){            
                $(this).css('width',sizes[counter]);
                counter++;
            }
        });
    });
    $("#table").prop("hidden",false);
}

它的作用是：

获取所有表头（id为“table”的表）的宽度，并将其存储在数组中

对于表体中的所有行，获取子单元格并将其宽度设置为与其对应的表头宽度相匹配

这很好，直到我注意到一个恼人的事实，这开始变成一个严重的问题。表格标题和下面相应的单元格大小不同。它们相差几个像素。标题越宽，差异越大

例如，使用Firebug，我注意到使用内联css定义的宽度为30%的th元素被转换为406px的滚动宽度，这也是我在包含这些宽度的数组中找到的值，但在JavaScript函数完成后，相应表单元格的滚动宽度为419px，而应用于此元素的css显示的宽度为406px。虽然th和td的边距和填充设置为0，但不知何故，在某些地方添加了13px。我检查滚动宽度的原因是基于解释各种宽度属性的主题，这样我确信我考虑了总大小。有关代码示例，请参见代码段

函数correctablecolumns（）{
var计数=0；
变量大小=[]；
$（“#表”）.find（“th”）.each（函数（）{
大小[计数]=$（此）[0]；
计数++；
});
$（“#表”）.find（“tbody”）.children（“tr”）.each（function（）{
计数器=0；
$（this）.children（“td”）.each（function（）{
如果（$（this）.next（）.is（“td”））{//这样可以让最后一个单元格占用所有可用空间，这样滚动条宽度就不会有问题
$（this.css（'width'，size[counter]）；
计数器++；
}
});
});
$（“#表”）.prop（“隐藏”，false）；
}

table.scrollTable{
宽度：100%；
}
table.scroll table thead，
table.scroll表体{
浮动：左；
宽度：100%；
}
table.scroll表体{
溢出y：滚动；
高度：50px；
宽度：100%；
}
表。滚动表th{
空白：正常；
边际：0px；
填充：0px；
}
table.scrollTable td{
边际：0px；
填充：0px；
}
table.scrollTable tr{
宽度：100%；
显示：表格；
}
table.scroll table thead{
溢出：假；
位置：相对位置；
}

可乐
可乐
可乐
可乐
可乐
可乐6
可乐
可乐
可乐
10
10
我个子矮
100
100
100
100
10
福
10
10
我是一个较长的句子
100
100
100
100
10
福

您试图设置单元格的宽度，且

foo

太小，无法包含文本。因此，浏览器会自动将其变大，而其他列/单元格在此过程中也会变小。如果开始时为该列增加宽度，则所有操作都有效：

函数correctablecolumns（）{
var计数=0；
变量大小=[]；
$（“#表”）.find（“th”）.each（函数（）{
大小[计数]=$（this.css（'width'）；
计数++；
});
$（“#表”）.find（“tbody”）.children（“tr”）.each（function（）{
计数器=0；
$（this）.children（“td”）.each（function（）{
如果（$（this）.next（）.is（“td”））{//这样可以让最后一个单元格占用所有可用空间，这样滚动条宽度就不会有问题
$（this.css（'width'，size[counter]）；
计数器++；
}
});
});
$（“#表”）.prop（“隐藏”，false）；
}

table.scrollTable{
宽度：100%；
}
table.scroll table thead，
table.scroll表体{
浮动：左；
宽度：100%；
}
table.scroll表体{
溢出y：滚动；
高度：50px；
宽度：100%；
}
表。滚动表th{
空白：正常；
边际：0px；
填充：0px；
}
table.scrollTable td{
边际：0px；
填充：0px；
}
table.scrollTable tr{
宽度：100%；
显示：表格；
}
table.scroll table thead{
溢出：假；
位置：相对位置；
}

可乐
可乐
可乐
可乐
可乐
可乐6
可乐
可乐
可乐
10
10
我个子矮
100
100
100
100
10
福
10
10
我是一个较长的句子
100
100
100
100
10
福

您需要使用表格布局属性来控制单元格的宽度

---

javascript在codepen中可用，只需单击修复按钮即可查看脚本的效率

---

函数correctablecolumns（）{
var计数=0；
变量大小=[]；
$（“#表”）.find（“th”）.each（函数（）{
大小[计数]=$（此）[0]；
计数++；
});
$（“#表”）.find（“tbody”）.children（“tr”）.each（function（）{
计数器=0；
$（this）.children（“td”）.each（function（）{
如果（$（this）.next（）.is（“td”））{//这样可以让最后一个单元格占用所有可用空间，这样滚动条宽度就不会有问题
$（this.css（'width'，size[counter]）；
计数器++；
}
});
});
$（“#表”）.prop（“隐藏”，false）；
}

table.scrollTable{
宽度：100%；
表格布局：固定；/*此处设置单元格宽度或CSS中设置的宽度*/
}
table.scroll table thead，
table.scroll表体{
浮动：左；
宽度：100%；
}
表1.scro