用於顯示的表寬度更改：無樣式

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 - 將此屬性設置爲其默認值。