Question

我只想在表加载后得到表格列宽，这样我就可以删除列中的额外空格并使其看起来紧凑。我想要的所有表格单元格应该只占用包含它的数据所需的宽度。

表结构如下：

<table style="display: table;"> 
    <tbody>
        <tr>
            <td></td> 
            <th>word</th>
            <th>%</th>
        </tr> 
        <tr> 
            <th>word</th> 
            <td><span class="count" style="display:block"> 1</span></td>
            <td><span class="percentage" style="display: block;"> 2.6%</span></td>
        </tr>
        <tr> 
            <th>word - word word word</th> 
            <td><span class="count" style="display:block"> 1</span></td>
            <td><span class="percentage" style="display: block;"> 2.6%</span></td>
        </tr>
        <tr> 
            <th>word - word word word word word</th> 
            <td> 1</span></td>
            <td><span class="percentage" style="display: block;"> 2.6%</span></td>
        </tr>
        <tr> 
            <th>word - word word</th> 
            <td> 2</span></td>
            <td><span class="percentage" style="display: block;"> 5.1%</span></td>
        </tr>
        <tr> 
            <th>word - word word word</th> 
            <td><span class="count" style="display:block"> 1</span></td>
            <td><span class="percentage" style="display: block;"> 2.6%</span></td>
        </tr>
        <tr> 
            <th>word - word word word word</th> 
            <td><span class="count" style="display:block"> 1</span></td>
            <td><span class="percentage" style="display: block;"> 2.6%</span></td>
        </tr>
        <tr> 
            <th>word - word word word</th> 
            <td><span class="count" style="display:block"> 2</span></td>
            <td><span class="percentage" style="display: block;"> 5.1%</span></td>
        </tr>
        <tr> 
            <th>word - word word</th> 
            <td><span class="count" style="display:block"> 3</span></td>
            <td><span class="percentage" style="display: block;"> 7.7%</span></td>
        </tr>
        <tr> 
            <th>word - word word</th> 
            <td><span class="count" style="display:block"> 25</span></td>
            <td><span class="percentage" style="display: block;"> 64.1%</span></td>
        </tr>
        <tr> 
            <th>word</th> 
            <td> 2</span></td>
            <td><span class="percentage" style="display: block;"> 5.1%</span></td>
        </tr>
    </tbody>
</table>

Answer 1

$(document).ready(function(){
    var width = $("table td:eq(0)").width();
    console.log(width);
})

Answer 2

我猜测你必须使用 $.trim() 之类的，

$('table tbody td').each(function(){
   console.log($(this).width()); // to get the column width
   trimmedText= $.trim($(this).text());
   $(this).text(trimmedText)
});

Answer 3

你的css可能会遇到一些问题。否则默认情况下，html表列的空间仅与任何td

的最大内容一样多

我认为你不需要获得宽度也许你只能修剪（删除空格）你桌子上的所有文本，就像Rohan告诉的那样

JSFIDDLE Demo

var allTds = $('table tbody td');
for(i=0;i<allTds.length;i++)
{
   trimmedText= allTds.eq(i).text();
   allTds.eq(i).text(trimmedText)
}

要获得宽度可能不需要的宽度

var firstRowTds = $('table tr').eq(0).children();
for(i=0;i<firstRowTds.length;i++)
{
   alert(firstRowTds.eq(i).width()); // column width
}

jQuery宽度函数为td赋予零值

3 个答案: