表头/正文宽度问题答案

【问题标题】：Table header/body width issue表头/正文宽度问题
【发布时间】：2018-09-17 05:28:40
【问题描述】：

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

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

用于页眉
用于正文内容（它是另一个 iframe 的一部分）

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

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

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

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

【问题讨论】：

我知道这并不能回答您的问题，但是您会反对使用 Ajax 请求而不是 iframe，这样您就可以让它成为一个表吗？在你试图伤害自己之前，我只是想确保这不是一个选择。 :-P
你能固定所有列的宽度吗？否则你必须做跨 iframe javascript，这可能会很痛苦。

标签： javascript css html-table

【解决方案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;
    }

【讨论】：

非常感谢..我认为 urs 是一个通用解决方案，应该适用于任何 col 宽度..我也会再次尝试相同的..thx..
HTMLTableElement.rows 您可能会感兴趣。 developer.mozilla.org/en/DOM/table.rows
只是一个简单的问题..合并功能..它只是计算更大的宽度并进行相应的设置，还是进行一些合并...
这只是一个将两个 objectCollections（或更多）合并到一个数组中的函数，因为它不能用 concat 完成 :) 非常感谢 Matt McDonald 我在我的 lib 文件中得到了类似的东西，但我没有设法使它在 ie6 中工作。
由于某些原因，我收到一个错误 td.setAttribute is not a function for line td.setAttribute("width", higestWidth[td.cellIndex] - padding); ....即即使它通过了 if(typeof td == 'object') 的条件

【解决方案2】：

我有点同意 Rodrigo 的观点，虽然我会设置最大宽度和最小宽度，而不是像这样设置宽度：

.col-username { 
     max-width:150px;
     min-width:150px;
}
.col-email { 
     max-width:200px;
     min-width:200px;
}

否则，实际大小可能取决于表格单元格内容和可用空间。

【讨论】：

【解决方案3】：

如果表格“流动”并不重要，您可以为每个列定义类并使用 css 设置它们的样式。例如：

.col-username { width:150px; }
.col-email { width:200px; }

等等。

编辑：here 是我刚刚发现的一个使用 CSS 实现此效果的示例。

【讨论】：

【解决方案4】：

如果可以的话，你应该使用<thead> 和<tbody>。

<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 / Col 1</td>
      <td>Row 1 / Col 2</td>
      <td>Row 1 / Col 3</td>
    </tr>
    <tr>
      <td>Row 2 / Col 1</td>
      <td>Row 2 / Col 2</td>
      <td>Row 2 / Col 3</td>
    </tr>
    ...
  </tbody>
</table>

除非您有单独的表的原因，否则这样做会更简单。

【讨论】：