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'。規則如