Show content based on width

HTML

<div id="parent">
    <div id="content">
    <table>
        <tbody>
            <tr><td><span class="full">BAHRAIN</span><span class="abbrev">BHR</span></td></tr>
            <tr><td><span class="full">BELGIUM</span><span class="abbrev">BEL</span></td></tr>
            <tr><td><span class="full">EGYPT</span><span class="abbrev">EGY</span></td></tr>
            <tr><td><span class="full">LITHUANIA</span><span class="abbrev">LTU</span></td></tr>
            <tr><td><span class="full">SWEDEN</span><span class="abbrev">SWE</span></td></tr>
        </tbody>
        </table>
    </div>
</div>

CSS

#parent {
    max-width: 400px;
    background-color: #ddd;
}
.abbrev {
    display:none;
}
.showsmall .abbrev {
    display:block;
}
.showsmall .full {
    display:none;
}

JavaScript

$(window).resize(function () {
    var w = $('#parent').width();
    console.log('width: ', w);
    if (w < 200) {
        $("#content").addClass("showsmall");
    } else {
        $("#content").removeClass("showsmall");
    }
});