試圖「同步」2個HTML表（應用列寬）

我有2個表：table1（「表頭」，它只有1行與表列） - 和table2（「數據表「，其中有幾行包含所有數據）。試圖「同步」2個HTML表（應用列寬）

table1將寬度分配給大多數列。我現在試圖將table1的列寬應用到table2的第一行（table1與table2具有相同的寬度）。

我的代碼是：

var tr1 = $("tr",tblHeader).eq(0); // 1st row from header-table 
var tr2 = $("tr",tblData).eq(0); // 1st row from data-table 
var td2 = $("td",tr2);    // all cells from data-table 

$('td',tr1).each(function(i)  
{ 
    var td1 = $(this);    // table1 column header-cell 
    var width = (td1.css('width')); // column-width from header-table 
    td1.css('width',width+"px");  // apply width to header-table-cell 
    td2.eq(i).css('width',wi+"px"); // apply width to data-table-cell 
});

問題：
在我的CSS，如設置TD-填充時：table td{padding:0px;}這一切工作很好（兩個表具有相同的列寬）。，但只要我改變填充類似table td {padding:2px;padding-left:4px;padding-right:4px;}的東西，數據表就搞砸了。當用螢火蟲檢查列寬時，所有列都有相同的寬度（table1 + table2），但它們看起來仍然不同。任何想法可能是錯誤的？

來源

2010-10-16 Fuxi

你可能最好使用'.outerWidth（）'得到一個表格單元格的當前寬度，但它仍然將是棘手的，因爲的「邊界崩潰」行爲。 – Pointy 2010-10-16 22:18:50

爲什麼不只是一個表，像這樣：

<table> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Age</th> 
      <th>Country</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Mike</td> 
      <td>26</td> 
      <td>USA</td> 
     </tr> 
     <tr> 
      <td>Peter</td> 
      <td>27</td> 
      <td>Great Britain</td> 
     </tr> 
     <tr> 
      <td>Hans</td> 
      <td>26</td> 
      <td>Germany</td> 
     </tr> 
    </tbody> 
</table>

來源

2010-10-16 22:27:23

您可能想要使用兩個表的原因（如我自己）是您想要的標題和正文可滾動。谷歌文檔使用兩個表來實現這種影響，並以某種方式同步它們。 – 2012-03-11 15:43:27

試圖「同步」2個HTML表（應用列寬）

回答

相關問題