隐藏< tr&gt ;,同时仍然涉及宽度计算 [英] Hiding a <tr>, while still involving it in width calculations

问题描述

搜索结果存储在如下所示的表中：

There are search results stored in a table like the one below:

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

实际表包含更多数据（列和行），并且是流体宽度。由于数据是可变的，我希望 table-layout 保留 auto ，因为它处理自动调整

The actual table contains much more data (both in columns and rows) and is fluid width. Since the data is variable, I would like the table-layout to remain auto, because it handles autoresizing (which would be expensive and complicated to do in javascript for say 1,000 rows).

此表也被实时搜索窗口小部件过滤，该窗口部件通过添加查询来隐藏与查询不匹配的行 display：none; 。然而，我发现这常常导致列宽被重新计算（通常导致列宽度的一些刺激跳跃）。这是有道理的，因为行可能只包括计算，如果他们有 display：table-row; 。但这不是我之后的行为。

This table is also filtered by a live search widget which hides rows that do not match the query by adding display: none;. However, I have found that this often causes the column widths to be recalculated (often causing some jarring jumps in column width). This makes sense, given that rows are likely only included calculations if they have display: table-row;. But this is not the behavior I am after.

可以隐藏< tr> 从视图，但仍然有它包括在列宽度计算完成（在调整大小，例如）浏览器在一个表与 table-layout：auto; ？ strong>

Is it possible to hide a <tr> from view, but still have it included in column widths calculations done (on resize, for example) by the browser on a table with table-layout: auto;?

我已经尝试设置 height：0; （和 max-height ：0; ），但从其他SO问题中学到了这不工作，因为 display：table-cell; 。同样，设置 line-height：0; 失败了，但是我认为这是因为我的几个列有块内容。

I've tried setting height: 0; (and max-height: 0;), but have learned from other SO questions that this does not work because of display: table-cell;. Similarly, Setting line-height: 0; failed, but I figured it would since a few of my columns have block content.

我还考虑了在< td> 的显式设置宽度，但是这使得表保持流畅（我必须删除显式宽度on resize，这可能会导致宽度跳跃，除非所有行都可见，并包含在浏览器的表格调整大小计算中，否则不会工作。）

I've also considered explicitly setting widths on the <td>s, but then this makes keeping the table fluid (I would have to remove the explicit widths on resize, which could cause width jumps, and wouldn't work unless all of the rows were visible and included in the browser's table resize calculation).

：要澄清，隐藏视图我的意思是隐藏的意义是 display：none; ，而不是 visibility：hidden; / code>。后者将工作，如果元素隐藏时不保留它的原始高度，但不幸的是这不是这样。

To clarify, by hide from view I mean hide as in the sense of display: none;, not visibility: hidden;. The latter of which would work if the element did not retain it's original height when hidden, but unfortunately this is not the case.

注意：第一眼看来这似乎是一个非常狭隘的适用问题，但我相信这可能是一个常见的用例。因此，我将粗体的最适用的部分（阅读：最重要的）的问题。

推荐答案

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

If I've understood correctly you are looking for visibility: collapse; declaration:

17.5.5动态行和列效果

17.5.5 Dynamic row and column effects

c $ c>属性对行，行
组，列和列组元素取值 collapse 。此值使整个
行或列从显示中移除，并且通过行或列占用的空间通常
可用于其他内容。
与折叠的
列或行相交的跨区行和列的内容被裁剪。但是，删除行或列，
不会影响表的布局。此
允许动态效果删除表行或列，而不强制$ b $为了说明列约束中的潜在变化
，需要重新布局表。

The visibility property takes the value collapse for row, row group, column, and column group elements. This value causes the entire row or column to be removed from the display, and the space normally taken up by the row or column to be made available for other content. Contents of spanned rows and columns that intersect the collapsed column or row are clipped. The suppression of the row or column, however, does not otherwise affect the layout of the table. This allows dynamic effects to remove table rows or columns without forcing a re-layout of the table in order to account for the potential change in column constraints.

是在一些网络浏览器上的bug。 MDN状态：

However it seems this is buggy on some of web browsers. The MDN states:

在某些新型浏览器中，对 visibility：collapse 的支持缺失或部分不正确
。在许多情况下，它可能无法正确处理
像 visibility：hidden 在表行和列之外的元素。

The support for visibility:collapse is missing or partially incorrect in some modern browsers. In many cases it may not be correctly treated like visibility:hidden on elements other than table rows and columns.

不幸的是，它在Chrome37上作为 visibility：hidden 起作用： 此处演示。

Unfortunately it acts as visibility: hidden on Chrome37: Demo Here.

但是幸运的是，您可以通过line-height：0 声明：

But fortunately, you can fake the effect by line-height: 0 declaration:

更新的演示

Updated Demo

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

这篇关于隐藏< tr&gt ;,同时仍然涉及宽度计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！