如何使td元素的宽度与输入元素的宽度相同？

<style>
    td {
        width: 100%;
    }
</style>
<table>
    <tr>
        <td>
            <input type="text">
        </td>
    </tr>
</table>

<script>
    window.onload = function() {
        var inputWidth = document.querySelector('input').offsetWidth;
        document.querySelector('td').style.width = inputWidth + 'px';
    };
</script>
<table>
    <tr>
        <td>
            <input type="text">
        </td>
    </tr>
</table>