Table Tool Buttons Not Working (inside DIVs) w/ JQuery Tabs

Hi,

I am having a problem making the buttons work as intended with table tools. When implemented, the CSV and PDF buttons do not do anything when they are clicked and I think its related to a DIV problem. I have verified Data Tables and Table Tools work by removing all DIVs and only using one DIV on the page (I am running the latest version of Data Tables and Table Tools).

Any ideas on why this wouldn't work with 2 DIVs and the table inside?

<script src="@Url.Content("~/media/js/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/media/js/jquery-ui-1.8.20.custom.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/media/js/jquery.dataTables.js")" type="text/javascript"></script>
<script src="@Url.Content("~/media/js/TableTools.js")" type="text/javascript"></script>
<script src="@Url.Content("~/media/js/ZeroClipboard.js")" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#test').dataTable({
            "sDom": 'T<"clear">lfrtip',
            "oTableTools": {
                "sSwfPath": "/media/swf/copy_csv_xls_pdf.swf",
                "aButtons": ["csv", "pdf", "print"]
            }
        });
</script>

<div id="tabs">
    <div id="tabs-2">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="test" width="100%">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>4</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Any help would be greatly appreciated!