表宽度更改显示:无样式

Question

我有2个portlet，每个portlet每个都包含一个表。在第一个按钮上，单击一个带有表格的Portlet，将显示一个隐藏。在另一个按钮上，单击反之亦然，就像整个Portlet切换一样。我使用样式的display:none和表演隐藏进行了此操作，但是现在我遇到了一个问题，即表列宽度更改为无。我无法使用可见度，因为它会产生差距。我该如何解决此问题？

       <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

链接的快速片段：

显示属性还允许作者显示或隐藏 元素。它类似于可见性属性。但是，如果您设置 显示：没有，它隐藏了整个元素，而可见性：隐藏 意味着该元素的内容是不可见的，但是 元素保持原始位置和大小。

以及我上面提到的值的一些信息：

块 - 元素被渲染为块级元素

内联 - 元素作为内联元素渲染。这是默认

初始 - 将此属性设置为默认值。

Answer 2

我不确定，是否解决了OP的问题，但我也有类似的问题：我想隐藏特定的表行，然后单击点击他们的显示。我尝试了jquery.toggle（），但显示的行比同一表中的其他行小。

我检查了实际的CSS显示值，并显示了table-row，因此，我编写了以下JS函数，该功能有效：

    function toggleTableRow() {
        let hiddenTableRows = $('.hidden-table-rows');
        if($(hiddenTableRows[0]).css('display') === 'none') {
            $(hiddenTableRows).css('display', 'table-row');
        } else {
            $(hiddenTableRows).css('display', 'none');
        }
    }

供参考，我的HTML表看起来与此相似：

<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr class="hidden-table-rows">
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
    </tr>
    <tr>
      <td>Cell 7</td>
      <td>Cell 8</td>
      <td>Cell 9</td>
    </tr>
  </tbody>