如何動態獲取td的寬度

Question

如何獲取td寬度並在您向其中添加長文本時使其動態更改...因爲我計劃使用表格滾動...並且我不想使用clone()是有辦法做到這一點..

這裏的標記：

<div class="table-cont"> 
<div class="table-header"> 
    <table> 
     <caption> 

     </caption> 
     <tbody> 
      <tr> 
       <td>Width 1</td> 
       <td>Width 2</td> 
       <td>Width 3</td> 
       <td>Width 4</td> 
       <td>Width 5</td> 
       <td>Width 6</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
<div class="table-body"> 
    <table> 
     <tbody> 
      <tr> 
       <td>Width 1</td> 
       <td>Width 2</td> 
       <td>Width 3</td> 
       <td>Width 4</td> 
       <td>Width 5</td> 
       <td>Width 6</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

腳本：

var tableHeader = $('.table-header').children('table').outerWidth(true); 
var tableWidth = $('.table-header table tr td').width(); 
alert(tableWidth); 
$('table-body tr td').append(tableWidth); 

CSS：

.table-header, 
.table-body{ 
border: 1px solid #d3d3d3; 
display: inline-block; 
} 
table { 
border-collapse: 0; 
border-spacing: 0; 
border: 0; 
} 
table thead th, 
table tbody tr td{ 
border-right: 1px solid #d3d3d3; 
padding: 5px 8px; 
font-weight: normal; 
table-layout: fixed; 
} 
table thead th:last-child,table tbody tr td:last-child{ 
border-right: 0; 
} 

Answer 1

試試這個，

var tableHeader = $('.table-header').children('table').outerWidth(true); 
var tableWidth = $('.table-header table tr td').width(); 
alert(tableWidth); 
$('.table-body table tr td').each(function(){ 
    $(this).append(' '+tableWidth); 
}); 

​​

更新爲了使th具有相同width作爲td。

$('.table-body table tr th').each(function(){ 
    $(this).append(' '+tableWidth); 
}); 

Answer 2

如果你想設置寬度使用：

$('table-body tr td').width(tableWidth);