表頭/身體寬度問題

我有一個表格，它有一個標題行和幾行正文內容。表頭/身體寬度問題

現在這些實際上是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

表頭/身體寬度問題

回答

相關問題