使用Jquery显示隐藏的数据表会中断CSS

编辑：已解决。当页面最初加载时，数据表是使用css文件形成的。然而，当它调用javscript时，它正在重建datatable并忽略我引用的任何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>

这是可行的，但是它破坏了CSS。数据表变得非常拥挤，只有其应有宽度的四分之一左右。我已经尝试在调用的函数中将宽度设置得更大，但是没有运气。我知道这与下面的代码有关

     style="display:none;"

一旦我把它拿出来，表就会显示得很好，但是我需要它隐藏起来，直到调用函数为止

我尝试了通常的$element.style.visibility，但似乎没有什么不同，桌子顽固地拒绝按照正确的尺寸。非常感谢您的帮助

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

   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;
    }

编辑：我上传了两张图片来显示表格之间的差异

这就是未隐藏的表

---

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

这里是jQuery方法文档的一部分。显示：

由于没有参数，.show方法是最简单的显示方法 一个要素：

$'.target'.show

匹配的元素将立即显示，没有动画。 这大致相当于调用.css'display'，'block'

所以show将元素设置为display:block，这可能就是它在display:block中的外观

这是一个

---

可能您只需要编辑表格的css属性，使其在显示时看起来更漂亮：bock

CSS被破坏，因为jQuery的.show和.hide函数只是在display:none和display:block或display:inline之间切换，但是元素的display属性的默认值是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

---

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

---

感谢所有帮助过我的人

我试过了，但是问题是表格可能很大，这在表格应该在的页面上留下了很大的空白。啊，我明白了，我会清理我的答案；但是，它也提到了显示属性恢复到最初的状态。我可能在这里误解了它，但我认为这意味着它恢复了原来的CSS。但我可能错了：我想这意味着它会回到你的显示器上：没有；谢谢康斯坦丁，我把它修好了，把答案写进了我的答案里。谢谢你的帮助！。如果使用：style=display:block，效果如何？是不是马上就搞糟了？你能给我们看看css吗？因为这不是正常的行为，如果您删除显示：无；它看起来像你期望的那样吗？在你的照片中有一些东西定义了“描述”选项卡的宽度。。但是在你的CSS中，我看不到你对相关部分的更新。。我将数据保留为那样，因为它只是一组示例数据，很高兴它有所帮助！抱歉被叫醒，幸好这也不起作用。与上述问题相同。@Chaney该问题可能与页面的其他元素有关，请您用更多代码举例说明情况并查看其他元素之间的关系好吗？谢谢Haynar，我已将其修复并将解决方案放入我的答案中。谢谢你的帮助！。我不会说英语，但你的回答令人惊讶。。这就解决了我的问题。

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