Как получить ширину 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); 
}); 

Fiddle

Обновлено для изготовления th с тем же width от td.

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

Answer 2

Если вы хотите установить ширину использования:

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