Question

搜索结果存储在如下表格中：

<table>
    <tbody>
        <tr>
            <td>Column One</td>
            <td>Column Two</td>
            <td>Column Three</td>
        </tr>
    </tbody>
</table>

实际表包含更多数据（包括列和行），并且是流体宽度。由于数据是可变的，我希望table-layout保持auto，因为它处理自动调整（对于1000行，这在javascript中会很昂贵和复杂）。

此表也由实时搜索小部件过滤，该小部件通过添加display: none;来隐藏与查询不匹配的行。但是，我发现这通常会导致重新计算列宽（通常会导致列宽度出现一些不和谐的跳跃）。这是有道理的，因为行可能只包含计算display: table-row;。但这不是我追求的行为。

是否可以从视图中隐藏<tr>，但是仍然将其包含在浏览器在table-layout: auto;的表格中进行的列宽计算中（例如，在调整大小时）？

我已尝试设置height: 0;（以及max-height: 0;），但已从other SO questions了解到，由于display: table-cell;这不起作用。同样，设置line-height: 0;失败，但我认为这是因为我的一些列有阻止内容。

我还考虑在<td> s上明确设置宽度，但这会使表保持流畅（我必须在调整大小时删除显式宽度，这可能会导致宽度跳跃，并且不会除非所有行都可见并包含在浏览器的表调整大小计算中，否则＃39;工作。

修改：为了澄清，隐藏在视图中我的意思是隐藏display: none;，而不是visibility: hidden;。如果元素在隐藏时没有保留原始高度，后者将起作用，但不幸的是情况并非如此。

注意：我知道乍一看这似乎是一个非常狭隘的问题，但我相信这可能是一个常见的用例。因此，我将问题中最适用的部分（读作：最重要的部分）加粗。其余的（对我来说稍微具体）比其他任何东西更具说明性。

Answer 1

如果我理解正确您正在寻找visibility: collapse;声明：

<强> 17.5.5 Dynamic row and column effects

visibility属性为行，行取值collapse   组，列和列组元素。这个值导致整个   要从显示中删除的行或列，以及正常的空格   被行或列占用以用于其他内容。   与折叠相交的跨越行和列的内容   列或行被剪裁。抑制行或列，   但是，不会影响表的布局。这个   允许动态效果删除表行或列而不强制   重新布置表格以便考虑潜在的变化   在列约束中。

然而，在某些网络浏览器上，这似乎是错误的。 MDN states：

对visibility:collapse的支持缺失或部分不正确在一些现代浏览器中。在许多情况下，可能无法正确对待与表行和列以外的元素类似visibility:hidden。

不幸的是，它在Chrome37上充当visibility: hidden： Demo Here 。

但幸运的是，您可以通过line-height: 0声明伪造效果：

<强> Updated Demo

.hidden {
  visibility: collapse;
  line-height: 0; /* Set the height of the line box to 0
                     in order to remove the occupied space */
}

Answer 2

使用CSS：

tr {
    visibility: hidden;
}

隐藏a，同时仍然涉及宽度计算

2 个答案: