jquery - 使用 Jquery 显示隐藏的数据表会破坏 CSS

Question

编辑:已解决。当页面最初加载时，数据表是使用布局的 css 文件形成的。但是，当它调用 javscript 时，它正在重建数据表并忽略我引用的任何 CSS 文件。因此，它会自动缩小表格以匹配文本的大小。通过在实际创建数据表时设置 bAutoWidth = false 可以避免这种情况。

感谢所有提供帮助的人!

所以我有一个数据表如下。

   <div class="datatable" style="display:none;">
            <div class="row">
                <table class="display" id="testtable">
                    <thead>
                        <tr>
                            <th>First column</th>
                            <th>Second</th>
                            <th>Third</th>
                        </tr>
                    </thead>
                    <tbody id="selectable">                           
                                <tr class="gradeU">
                                    <td align="left">First column info</td>
                                    <td align="left">second</td>
                                    <td>Third</td>
                                </tr>
                    </tbody>
                </table>

            </div>
        </div>

所以上面是数据表，如您所见，表本身是隐藏的，因为我只想在用户将鼠标悬停在按钮上时显示它。当用户将鼠标悬停在按钮上时，将从函数调用以下代码。

   $(".datatable").show();

这可行，但它破坏了 CSS。数据表变得非常压扁，只有应有宽度的四分之一左右。我尝试在调用的函数中将宽度设置得更大，但没有成功。我知道和下面的代码有关系

     style="display:none;"

一旦我将其取出，表格就可以正常显示，但我需要将其隐藏，直到函数被调用。

我已经尝试了通常的 $(element).style.visibilty 但似乎没有什么不同，表格顽固地拒绝调整到正确的大小。非常感谢任何帮助，并提前致谢。

编辑:下面是表格和TD的CSS

   table.display {
margin: 10px;
padding: 5px;
clear: both;
width: 98%;
overflow: auto;
/*    text-align: center;*/
height: auto;

    }

    table.display td {
        padding: 5px 5px;
     }

    table.display td.center {
        text-align: center;
    }

编辑:我上传了 2 张图片以显示表格之间的差异。

http://imageshack.us/photo/my-images/840/correecttable.png/

这是未隐藏时的表格。

http://imageshack.us/photo/my-images/822/incorrecttable.png/

这是隐藏然后使用 jQuery 显示的表格。

Answer 1

CSS 已损坏，因为 jQuery 的 .show()和 .hide()函数只是在 display: none 之间切换和 display: block (或 display: inline )，但默认值为 display <table>的属性(property)元素是 display: table而不是 display: block , 所以不用 $(".datatable").show();和 $(".datatable").hide();使用以下内容:

$(".datatable").css({'display': 'none'});  // to hide the table, here you can
                                           //  still use jQuery's .hide()
$(".datatable").css({'display': 'table'}); // to show the table