Can't set table width properly (fixed by setting box model)

by slolife

HTML

<table style="border-collapse:collapse; border:1px solid black;box-sizing: border-box; ">
    <tr>
        <td>Label 1</td>
        <td>
            <input type='text' size='10' />
        </td>
        <td>End 1</td>
    </tr>
    <tr id="two">
        <td>Label 2</td>
        <td>
            <input type='text' size='50' />
        </td>
        <td>End 2</td>
    </tr>
</table>
<div style='margin-top:1em'>
    <button id="removeBeforeSet">Remove before set</button>
    <button id="removeAfterSet">Remove after set</button>
</div>
<div id="out" style='margin-top:1em'></div>

JavaScript

function append(text) {
    var $out = $('#out');
    $out.html($out.html() + "<div>" + text + "</div>");
}

function removeBeforeSet() {
    var orgWidth = $('table').width();
    append('Original width = ' + orgWidth);
    $('#two').remove();
    append('Width after remove = ' + $('table').width());
    $('table').width(orgWidth);
    append('Width after setting width to ' + orgWidth + ' = ' + $('table').width());
}

function removeAfterSet() {
    var orgWidth = $('table').width();
    append('Original width = ' + orgWidth);
    $('table').width(orgWidth);
    append('Width after setting width to ' + orgWidth + ' = ' + $('table').width());
    $('#two').remove();
    append('Width after remove = ' + $('table').width());
}

$(document).ready(function () {
    $('#removeBeforeSet').click(removeBeforeSet);
    $('#removeAfterSet').click(removeAfterSet);
});