jquery - jQuery幅関数はtdにゼロ値を与えています

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