After jquery hide then show, width of width:auto elements is smaller than normal

Issue

I'm trying to display a list of information, and it works normally, however when I hide the div containing the list and then show it again, the width of the elements with the "width: auto" styling are being re sized and the new size is too small:

Before hide:

After Hide:

My php generating the elements looks like this:

<div displayitem='true'>
    <table>
        <?php
            foreach($aExistingChangeDetailsData['customers'] as $aCustomer){
                ?><tr><td><li style='width:auto;'><?php echo $aCustomer['sCustomerName']; ?></li></td></tr><?php
            }
        ?>
    </table>
</div>

and my jquery is simply:

function expandSection() {
    $("div.cd-content").show("slow");
}

function collapseSection() {
    $("div.cd-content").hide("slow");
}

I'm guessing the issue is due to the re sizing nature of the slide animation, is there any simple way to keep the width of width:auto elements after the hide so they are restored to the proper size?

Edit: It seems to be decreasing the width by exactly 5 for every element.

Solution

try to use fadeIn and fadeOut istead of show and hide respectively, cause hide() changes width of element to zero, but fadeOut() changes attribute opacity and doesn't width

Answered By - Banzay