用于显示的表宽度更改：无样式

Question

我有两个包含每个表的portlet。在第一个按钮上点击一个带有表格的portlet会被显示出来，而另一个仍然隐藏。在另一个按钮上，反之亦然，就像整个Portlet切换一样。我使用样式display:none和show-hide来做到这一点，但现在我遇到了一个问题，即表格列的宽度更改为无显示。我无法使用可见性，因为它造成了差距。我该如何解决这个问题？

 <div class="portlet light bordered"> 
      <div class="portlet-body"> 
       <table id='aa'></table> 
      </div> 
     </div> 
     <div class="portlet light bordered" style="display: none"> 
      <div class="portlet-body"> 
       <table id='bb'></table> 
      </div> 
     </div> 

Answer 1

如果你设置了display: none那么它会隐藏这个元素并且还会破坏格式。

要解决它，你将需要设置你的按钮，点击添加以下的风格display: initial，或者将其设置为任何你需要得到你想要的结果，也许display: inherit或display: inline。

这里看到更多的信息：https://www.w3schools.com/jsref/prop_style_display.asp

从链路快速片段：

显示属性也允许创作者显示或隐藏 元素。它与可见性属性相似。但是，如果将 设置为display：none，则隐藏整个元素，而visibility：hidden 表示元素的内容将不可见，但 元素保留其原始位置和大小。

而关于我上述值的一些信息：

块 - 元呈现为块级元素

直列 - 元呈现为一个内嵌元素。这是默认值

initial - 将此属性设置为其默认值。