表格标题/正文宽度问题

Question

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

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

1. 用于标题
2. 用于正文内容（这是另一个iframe的一部分）

我希望列标题的宽度应该相同，并且它对应于正文内容。

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

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

注意：我将无法使用固定的col宽度，也无法控制合并到一张表中。

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;
    }

Answer 2

如果使表“流畅”并不重要，则可以为每个列定义类，并使用CSS设置样式。 例如：

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

等等。

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

Answer 3

我有点同意Rodrigo，尽管我会设置max-width和min-width，而不是像这样设置width：

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

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

Answer 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>

除非有单独的表的原因，否则以这种方式进行操作会容易得多。