# 2018.09.21

在做 ChartLegend 的时候,有一个需求是:

一个表格,宽度由内容撑开,提供搜索功能,隐藏不匹配搜索值的行,但是表格宽度不能变化。

这就遇到了一个问题,内容由宽度撑开,要是隐藏了最宽的那一行,这个表格就会收缩,但是需求是宽度不能变化,不然会导致宽度随着输入值变大变小,使得不和谐。

刚开始的时候考虑的是把一行直接 display: none,这样就会出现上面的那个宽度变化的问题。

后来想,可以把一行的高度置为 0,这样只占据宽度而不占据高度,就可以达到不收缩表格的要求。

然鹅,由于表格行的 display 为 table-row,表格单元格的 display 为 table-cell,这两者都不支持设置 height 或者 max-height,甚至 transform: scaleY(0) 也只会将内容变化,高度还是不变。

后来在无意间发现了一个神奇但是从来没有用过的指令:visibility: collapse;。以前只知道由 visible、hidden 和 inhreit,第一次见到这个属性值,真是丢了前端的脸…

W3C 上对该属性值的描述1:

当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。

MDN 上对该属性值的描述2:

用于表格行、列、列组和行组,隐藏表格的行或列,并且不占用任何空间(与将 display: none 用于表格的行/列上的效果相当)。但是其他行与列的宽和高不会重新计算,行与列的宽高计算依然会将被设为 collapse 的行和列考虑进去。这是用于快速从表格中删除一行或一列,而无需重新计算表格其他元素的宽和高。(用于其他元素时,collapse 效果与 hidden 相同。)

看到的第一眼我就感觉它就是我要找的「人儿」!

果然起作用了,隐藏某一行后,不占据高度,也不改变表格布局,完美~ done~

上次更新: 2018/12/27下午12:53:48