如何动态获取td的宽度

时间:2013-07-09 10:14:27

标签: javascript jquery scroll html-table scrollable-table

如果我向他们添加一个长文本,我怎样才能获得td宽度并使其动态更改...因为我打算让一个表体可滚动...而且我不想使用{ {1}}有没有办法实现它?...

这是标记:

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>

的CSS:

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

2 个答案:

答案 0 :(得分: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

更新了,使thwidth具有相同的td

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

答案 1 :(得分:1)

如果要设置宽度,请使用:

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