如何动态获取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);