CSS: folding table columns

这是一份翻译。与英文版本相比，它可能包含错误或者过时。翻译员:Samuel Chong of Chinese Translation Services through its pro bono translation services

请见索引查看更多提示.

折叠表列

下面的两个表格可以完整显示或省略一个或多个列。此页面演示两种方法在不同视图之间切换。

选择其他样式表(在视窗，您可以在检视菜单找到它们), 或
单击列标题.

第一个例子表
Item	Info	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
First	1st	56	28	85	24	67	27	67	20	21	74	45	48
Second	2nd	34	28	84	74	95	77	21	31	54	34	84	47

第二个例子表
Item	Info	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
First	1st	imo	boo	ba	fie	ro	ore	yu	ek	quo	phe	lei	ats
Second	2nd	eu	eo	suh	ohn	hye	lef	wa	bu	orf	ir	soi	se

'visibility' 属性

通常，要隐藏元素的视图，你会使用'display'属性并将其设置为'none'。但是CSS也有一个属性叫 'visibility'，可以不同的方式隐藏元素。特别是，我们在这里使用专门为隐藏表列和行而设计的'visibility：collapse'。

使用此方法，当实际计算表格的布局时，折叠列仍然存在，但该列并不会显示。效果是将未使用的空间留在表的右边缘。

'collapse' 值是由于交互使用:首先所有列都是可见的，然后有些东西（我们将在下面看到那样东西）改变从'visible'到 'collapse'的某些列上的'visibility'值。这些列消失，但其余列的内容不会以任何方式更改。这些列只是靠近在一起。当值变回'visible'时, 折叠的列将重新显示及其他列向后移动，同样没有改变任何单元格的布局。这不仅使该过程快速，它也帮助你的眼睛识别每个移动后的列。

要在表列上放置样式规则，文档中必须有表示这些列的元素。在 HTML, 那些是<col> 元素。上面表格的HTML代码如下所示：

<table>
<col>
<col>
<col class=m01>
<col class=m02>
<col class=m03>
<col class=m04>
<col class=m05>
<col class=m06>
<col class=m07>
<col class=m08>
<col class=m09>
<col class=m10>
<col class=m11>
<col class=m12>
<thead>
<tr>
<th>...

类属性使得更容易编写样式规则。其中一个样式规则是：

col.m04 { visibility: collapse }

这折叠任何与类m04的列。接下来，我们需要一种方法来打开和关闭此规则。

交替样式表

第一种方法涉及交替样式表(请见文章"交替样式表").这个页面有不少于十一种交替样式称为"View for...;" 对应于十一种不同的方式来显示表。HTML代码如下所示：

<link
  rel="alternate stylesheet"
  href="foldingstyle/month02.css"
  title="View for February">
<link
  rel="alternate stylesheet"
  href="foldingstyle/month03.css"
  title="View for March">
<link
  rel="alternate stylesheet"
  href="foldingstyle/month04.css"
  title="View for April">
...

每个这些交替样式只有两行：一行是要导入默认样式表，和一行是用于折叠相关列。例如：这是个完整的 month04.css档案。它隐藏.m01，.m02和.m03列, 即是,1月，2月和3月的列：

@import "../../CSS/w3c-2010/main.css";
.m01, .m02, .m03 { visibility: collapse }

交替样式表是一种简单的方法.。如你所见，样式规则简单明了。另一方面，在样式之间切换通常不是很快，因为用户必须从菜单中选择一种样式。这涉及多个鼠标移动或几个按键。

':target'选择器用法

第二种方法依赖于'：target'选择器。它选择（最多一个）文档中作为链接目标的元素，该链接是您跟随以到达该文档的目标。 (请见文章"指定界面"查看更多有关 ':target'.)

我们可以使用这个选择器来根据哪个元素是当前目标来以不同的方式设计表格。然后，我们只需要提供指向这些目标的链接，每次点击链接，不同的元素会成为目标，并应用不同的样式。

我们需要在文档中尽可能多的潜在目标，因为我们有不同的样式，以及到这些目标的超链接此网页使用空的<div> 元素作为目标并将＆lt;a＆gt; 元素放在列标题中：

<div class=hack id=view02></div>
<div class=hack id=view03></div>
<div class=hack id=view04></div>
...
<table>
...
<th><a
 title="Click to hide earlier columns"
 href="#view02">Feb<a>
<th><a
 title="Click to hide earlier columns"
 href="#view03">Mar<a>
<th><a
 title="Click to hide earlier columns"
 href="#view04">Apr<a>
...

(标题属性解释了每个链接会发生什么.)

这些额外的<div> 和 <a>元素没有其他功能能支持样式，这就是我称这种方法为hack的原因。在未来的CSS扩展中，可能会有一种直接切换元素样式的方法（请参见下面）。

样式规则有点复杂。这里是其中之一：

#view02:target ~ * .m01 {
  visibility: collapse }

如果它是一个元素的后代，它本身就是具有ID"view02"的元素的下一个同级元素，并且是当前目标，那么它将折叠元素.m01。有关完整的规则集，请参阅"view.css"样式表。（这里有66个对于这个特定的例子，）

这些规则允许读本通过点击列标题来显示和隐藏列. 一个额外的优点是每种不同的方式显示表都有自己的URL。例如：http://www.w3.org/Style/Examples/folding#view06 打开包含已经隐藏的列Jan，Feb，Mar，Apr和May的页面。

一般来说，当您跟随链接时，浏览器滚动窗口，使目标元素显示在顶部附近。在这种情况下，目标从视图中隐藏：

.hack { display: none }

没有规范定义浏览器在那种情况应该滚动到哪，但希望它根本是不滚动。

冲突模式

由于此页面使用两种不同的方法折叠列，因此必须优先选择其中一种方法。在这种情况下, 替代样式将胜出如果您选择了"View for June"样式，然后点击八月列，六月列将不会收合。

然而，很容易扭转这种先后顺序。带有'：target'规则的样式表的链接如下所示：

<link
  rel=stylesheet
  href="foldingstyle/view.css"
  title="Main">

这意味着样式表仅与称为"Main"的其他样式一起加载，而不与称为"View for＆hellip;"的任何样式一起加载。只是删除title属性就足以使样式表适用，无论加载什么样的替代样式。

限制与一个可能的未来

此页面显示两个表，其列以相同的方式折叠和展开，这是为了说明这两种方法的限制：事实上，不可能独立地折叠两个表中的列。

正如以上所述，带有'：target'选择器的方法需要在源中添加额外的元素。此外，如果您想使用超链接作其他用途，比如说，用于目录，那么你不能再使用它们来折叠表。（另一方面，） (On the other hand, 你可以用'：checked'选择器而不是'：target'选择器来构建一个类似的技巧。这释放了超链接，但有其他约束。)

由于这些原因，CSS应该最终得到一个功能去直接在一个元素的两个或多个样式之间切换，而不需要显式的超链接。

直到二零一一年七月，CSS工作组尚未发布具有这样的功能的工作草案，但些有想法。一个这样的想法是引入伪类'：alternative'。规则如