Redrawing DataTable makes it grow wider when using scrollY option.

jmelott

I am having an issue with using DataTable. I have extracted a minimal portion of my code needed to provide an example of the behavior. When I bring up the code below in a browser and click on the properties button, the data table is displayed. The table grows wider by a few pixels every time I click the clear button as can bee seen by the border getting larger each click. It doesn't happen unless the scrollY parameter is present. Note, I have also tried this with data in the table and it seemed to have the same effect. Is there some setting I am missing that would stop this behavior?

Example available at http://live.datatables.net/damabiga/1

Body of page:

    <div id="form_area" class="bordereddiv" style=" float:left; width:525px; height:652px; ">
        <div style="border: 1px solid #000000; width: 100%;">
            <fieldset id="generalChmInfo" >
                <legend>General Form Information</legend>
                <label for="name"> Name &nbsp;</label>
                <input type="text" name="name" id="name" />
                <button name="showProperties" id="showProperties" onclick="showFormSection(this.id)" >Properties</button>
            </fieldset>
            <fieldset id="Properties" style="display:none;">
                <br>
                <table id="propertiesTable" class="datatable" style="border: 1px solid #000000; width: 100%;" >
                    <thead>
                        <tr><th>Property</th><th>Value</th></tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <button id="clearAll">Clear All</button>
            </fieldset>
        </div>
    </div>
    <script>
        function showFormSection(id)
        {
            var section = id.substring(4);

            if (section.indexOf("Prop") > -1)
            {
                $("#Properties").show();
            }
        }

        function initTables()
        {
            var propertiesTable = $('#propertiesTable').DataTable(
                {
                    "bFilter": false,
                    "scrollY": "200px",
                    "autoWidth": false,
                    "scrollCollapse": false,
                    "paging": false
                }
            );
            $('#clearAll').on( 'click', function () 
            {
                propertiesTable.clear().draw(true);
            });
        }

        $(document).ready(function() {initTables();});
    </script>