Как получить ширину тд динамически

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

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

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

Answer 2

Попробуй это,

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);
});