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或{{1} }。

有关详细信息，请参阅此处：https://www.w3schools.com/jsref/prop_style_display.asp

链接中的快速摘录：

display属性还允许作者显示或隐藏元件。它类似于visibility属性。但是，如果你设置 display：none，它隐藏整个元素，而visibility：hidden 意味着元素的内容将是不可见的，但是元素保持原始位置和大小。

关于我上面提到的值的一些信息：

block - 将元素呈现为块级元素

内联 - 元素呈现为内联元素。这是默认的

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

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>

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

2 个答案: