在table表格元素中，有一個(gè)col元素(它還有一個(gè)孿生胞兄colgroup元素)，在 W3C 標(biāo)準(zhǔn)中，這個(gè)元素被稱為列元素，用于定義表格中的某些列中的表現(xiàn)形式，在現(xiàn)行及常見的教程中，認(rèn)為col元素可以使用常見的全局屬性，以及align、valign、width等屬性(乃至HTML 4.1 及 5.0 規(guī)范文檔中，也同意該元素可以使用全局屬性)，很多DEMO也用它來舉例說明如何讓表格中的某列居中對(duì)齊、右對(duì)齊或改變某列的文字顏色，而事實(shí)上在大家常年的實(shí)踐中，已經(jīng)證明了一個(gè)很恐怖的事情…align也好valign也罷，甚至連全局屬性中的color屬性都完全不起作用，這到底是發(fā)生了什么事。

照例先上結(jié)論：

在 CSS 2 中，列元素就僅能使用border、background、width及visibility這四個(gè)屬性，其它屬性(如對(duì)齊及字色都無法生效)。

IE6、IE7及IE8(Q)遵循常見教程，可以使用各種對(duì)齊和文字相關(guān)設(shè)置。

IE9開始及現(xiàn)在所有常用非IE瀏覽器均支持:nth-child(n)選擇器，可以用該選擇器實(shí)現(xiàn)列選擇，并支持所有全局 CSS 屬性。

IE8(S)無解(因?yàn)樗恢С稚鲜鲞x擇器)，除第一條所描述的 4 個(gè) CSS 屬性之外，無法統(tǒng)一改變列的對(duì)齊及字色。

而col及colgroup元素，除了對(duì)IE6、7、8進(jìn)行兼容之外，已經(jīng)沒用了。

為什么，這究竟是為什么……

從比較簡單而明顯的角度說，所有元素的屬性在未定義的情況下，都是“繼承”，也就是與其父元素屬性相同。而表格的 HTML 書寫方式，是以行為基礎(chǔ)的，單元格是行的子元素，但不是列的，所以它繼承不到列的屬性。

從更根本的角度說，是 CSS 的工作模式所決定的。頁面的一切表現(xiàn)均交由 CSS 進(jìn)行計(jì)算和渲染，而 CSS 的基本工作方式遵循下面的步驟：

解析樣式表和文檔

對(duì)于文檔中的每個(gè)元素：

決定應(yīng)用哪個(gè) CSS 規(guī)則。

使用這些規(guī)則做出 CSS 級(jí)聯(lián)。

如果級(jí)聯(lián)的結(jié)果是關(guān)鍵字“繼承”(或繼承的屬性沒有規(guī)定值)，則進(jìn)行繼承

執(zhí)行計(jì)算(把’em’變成’px’等等)。在 CSS 2.1 中，getComputedStyle()DOM方法負(fù)責(zé)返回這些值。

此時(shí)，每個(gè)元素的所有屬性都會(huì)有一個(gè)值。

排列文檔版式

繪制文檔

在這樣的工作順序下，因?yàn)榱性厥莇isplay:table-column，而單元格元素是display:table-cell，他們之間的具體關(guān)系要到第三步才能確認(rèn)，因?yàn)槟阈枰?jì)算某一個(gè)單元格橫跨幾列或幾行，才能確定某一個(gè)單元格到底是第幾列。而在那之前，也就是第二步的時(shí)候，每個(gè)元素的屬性值都已經(jīng)計(jì)算出來了!但你還不知道哪個(gè)單元是第幾列，所以你沒辦法知道該列的值。

然后我做了一個(gè)很無聊的DEMO，使用上面說到的 CSS 3 選擇器，選擇所有偶數(shù)列的單元格，變成藍(lán)色;而讓所有第三列的單元格變成黃色。然后分別對(duì) n 行 n 列的單元格進(jìn)行合并操作(也就是第一行的第一個(gè)單元格占據(jù)3個(gè)單元格的，第二行的第二個(gè)單元格占據(jù)3個(gè)單元格，以此類推)。結(jié)果如下：

列元素所用屬性之謎

因?yàn)閷?duì)單元格進(jìn)行了列合并，而那個(gè)選擇器的本質(zhì)又是按照行而非列選擇的，結(jié)果就變成上面那樣了(沒能在視覺上垂直渲染某一列)。

話雖這么說，但在脫離了表格布局那么多年的今天，在表格終于能夠回歸它本來的應(yīng)用目的的今天，這種奇葩布局的表格應(yīng)該也是寥寥無幾了。

更多信息請(qǐng)查看IT技術(shù)專欄