表头/身体宽度问题

我有一个表格，它有一个标题行和几行正文内容。表头/身体宽度问题

现在这些实际上是2个独立的表格; 1.对于标题 2.对于正文内容（它是另一个iframe的一部分）

我希望宽度应该与列标题相同并且是相应的主体内容。

我该如何确保两个宽度相似，并且外观类似于它们是同一个表的一部分？

我打开这两个CSS或JavaScript修复..

注：我不能够使用固定山坳宽度和我也不知道有控制合并到1台......

谢谢。

来源

2011-05-19 testndtv

我知道这并不能回答你的问题，但你会反对使用Ajax请求而不是iframe，所以你可以让它成为一个单一的表？我只是想确保在尝试并伤害自己之前，这不是一种选择。 :-P – Jeremy 2011-05-19 13:22:36

你能在所有列上固定宽度吗？否则，你必须做交叉iframe的JavaScript，这可能是一个痛苦。 – vinhboy 2011-05-19 13:26:17

我不能使用固定宽度.. – testndtv 2011-05-19 18:05:56

也许这样？这会让你的表格行事，犹如大公其中一个

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

用我自己的一些功能在这里差点忘了IM，这里大公来藏汉

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

来源

2011-05-19 14:24:04

Thx很多..我假设urs是一个通用的解决方案，应该适用于任何col宽度..我也会再次尝试相同的..thx .. – testndtv 2011-05-19 17:27:43

HTMLTableElement.rows可能是对你的兴趣。 https://developer.mozilla.org/en/DOM/table.rows – 2011-05-19 17:29:00

只是一个简单的问题..合并函数..它只是计算更大的宽度和相应的设置或它是做一些合并... – testndtv 2011-05-19 17:29:11

如果表不重要，那么您可以为每个列定义类并使用css进行设置。例如：

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

等。

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

来源

2011-05-19 13:26:04

-1

如果可以，您应该使用<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>

除非你有分开的表格的原因，否则这样做会简单得多。

来源

2011-05-19 13:27:15 scurker

我罗德里戈排序的同意，但我会设置最大宽度和最小宽度，而不仅仅是宽度，像这样：

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

否则，实际尺寸可以取决于表格单元格的内容和可用空间。

来源

2011-05-19 13:33:22

表头/身体宽度问题

回答

相关问题