[英]How to get the width of the td dynamically
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?.. 我如何获得td宽度,并在向其添加长文本后使其动态变化...因为我计划使表格主体可滚动..而我不想使用clone()
是有办法实现吗?
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: 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;
}
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);
});
Updated for making the th
with the same width
as of td
. 更新为使th
具有与td
相同的width
。
$('.table-body table tr th').each(function(){
$(this).append(' '+tableWidth);
});
如果要设置宽度,请使用:
$('table-body tr td').width(tableWidth);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.