How to get the width of the td dynamically

Question

How can I get the td width and make it dynamically change once you added a long text to them... Because I'm planning to have a table-body scrollable.. and I don't want to use the clone() is there way to make it happen?..

Here's the markup:

<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>

script:

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

Rohan Kumar · Answer 1 · 2013-07-10T04:28:01.870

1

Try this,

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

Updated for making the th with the same width as of td.

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

edited Jul 10 '13 at 04:28

answered Jul 09 '13 at 10:17

Rohan Kumar

40,431
11
76
106

is there a way also to make the th are the same with the width of the td so that when the td change with the th also change its width according to the size of the td.. ? – John Louie Biñas Jul 10 '13 at 01:01
@JohnLouieBiñas test the above I've made changes in it. – Rohan Kumar Jul 10 '13 at 04:28

score 1 · Answer 2 · answered Jul 09 '13 at 10:21

1

If you want to set the width use:

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

answered Jul 09 '13 at 10:21

Vennik

565
3
11

How to get the width of the td dynamically

2 Answers2