테이블 너비가 변경되어 표시됩니다. 없음 스타일

Question

각 테이블이 포함 된 2 개의 포틀릿이 있습니다. 첫 번째 단추에서 표가 표시된 하나의 포틀릿을 클릭하고 다른 표는 숨겨진 상태로 유지됩니다. 다른 버튼을 클릭하면 전체 포틀릿 토글처럼 클릭이 발생합니다. 내가 스타일 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

링크에서 빠른 조각이 :

디스플레이 속성은 또한 저자가 보여 또는 요소를 숨길 수 있습니다. visibility 속성과 비슷합니다. 그러나 display : none을 설정하면 전체 요소가 숨겨지고 visibility : hidden 은 요소의 내용이 보이지 않지만 요소는 원래 위치와 크기로 유지됩니다.

그리고 위에서 언급 한 값에 대한 약간의 정보 :

블록 - 요소는 인라인 요소로 렌더링 - 요소

인라인 블록 레벨 요소로 표현된다. 기본값 인

initial -이 속성을 기본값으로 설정합니다.