javascript - 表头/正文宽度问题

Question

我有一个表格，其中有一个标题行和几行内容。

现在这些实际上是 2 个单独的表:

1. 用于标题
2. 正文内容(另一个 iframe 的一部分)

我希望列标题的宽度应与相应的正文内容相同。

如何确保宽度相似且外观相似，就好像它们是同一张 table 的一部分？

我对 CSS 或 Javascript 修复持开放态度..

注意:我将无法使用固定的列宽度，而且我也无法控制合并到一个表中...

Answer 1

也许是这样的？这将使您的表表现得就像一个

    var table1 = document.getElementsByTagName('table')[0].getElementsByTagName('tr');
    var table2 = document.getElementsByTagName('iframe')[0].contentDocument.getElementsByTagName('tr');

    var tr = merge([table1,table2]);
    var padding = 2; //set your padding to make up for difference from offsetwidth vs style width

    var higestWidth = new Array();
    for(var i in tr){
        for(var j in tr[i].childNodes){
        var td = tr[i].childNodes[j];
        if(typeof td == 'object'){
            if(higestWidth[td.cellIndex] == null || higestWidth[td.cellIndex] < td.offsetWidth){
            higestWidth[td.cellIndex] = td.offsetWidth;
            }
        }
        }
        for(var j in tr[i].childNodes){
        var td = tr[i].childNodes[j];
        if(typeof td == 'object'){
            td.setAttribute('width', higestWidth[td.cellIndex] - padding);
            }
        }
        }

差点忘了我在这里使用了一些我自己的函数，它们也来了

        var foreach = function(object,loop){
        for (var key in object) {
            if (object.hasOwnProperty(key)) {
            loop(object[key],key);
            }
        }
    }
    var merge = function(objectCollections){
        var array = new Array();
        foreach(objectCollections,function(objectCollection){
            foreach(objectCollection,function(object){
                array.push(object);
            });
        });
        return array;
    }