MozTW 討論區 • 檢視主題 - 表格隔行變色的純 CSS 做法

所有顯示的時間為 UTC + 8 小時

表格隔行變色的純 CSS 做法

第 1 頁 (共 1 頁)

[ 7 篇文章 ]

列印模式	上一個主題 \| 下一個主題

發表人

內容

wini

文章主題 : 表格隔行變色的純 CSS 做法

發表於 : 2006-09-04, 12:10

[網站管理員]

註冊時間: 2005-01-02, 05:49
文章: 3220

目前發現到的是有幾種做法…

1. 老實地為 HTML 上 class 再用 CSS 處理
2. 用 JavaScript 搭配 CSS 處理
3. 用好像是 IE Only 的 CSS 語法來處理
4. 用很少瀏覽器支援的 W3C 標準中的方式來處理
5. 全用 HTML 來處理

我用 Google 找「表格隔行 TABLE CSS 」是沒找到第四點，所以想請問一下這裡有沒有人知道的？因為我想用 Stylish 來修改網頁樣式這樣。

先謝了。

_________________
【Firefox 有問題請先看這裡】
回覆文章的建議
萬用自我檢測除錯大法 for Firefox
完全備份大法 for Firefox
重建 Firefox 的設定
乾淨升級 Firefox
（本帳號停用中）

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

訪客

文章主題 :

發表於 : 2006-09-04, 13:01

http://www.w3.org/TR/2005/WD-css3-selec ... al-pseudos

不知道 opera 有沒有支援

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

wini

文章主題 :

發表於 : 2006-09-04, 17:06

[網站管理員]

註冊時間: 2005-01-02, 05:49
文章: 3220

hemiola 寫:

http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#structural-pseudos

不知道 opera 有沒有支援

不好意思，我雖然嘗試過了，不過好像有點失敗。

我有 Stylish 中寫了:

代碼:

tr.c12[align="right"]:nth-child(even) {
background:blue !important
}

不過Stylish 卻回應我說代碼含有以下錯誤（節錄一部分）:

引言回覆:

讀取「 nth-child 」時發生虛擬類別或虛擬元素與預期的型態(函式或非函式)不合的情形。由於有錯誤的選擇器(Selector)所以略略規則組。

請問這是代表說，我目前的 Fx 1.5.0.6 還不支援的意思嗎？

（另外，我試過 last-child 有成功， first-child 好像失敗了。）

我附了一個測試檔案在附加檔中，有興趣的可以看看。也許是我寫錯了，也許是我的瀏覽器還不支援，總之目前我是看不出來該效果的。

感謝 hemiola 的回應。 :)

附加檔案:

檔案註釋: 測試表格隔行變色的 CSS 用的例子

table_20060904.zip [575 Bytes]
被下載 449 次

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

李某人

文章主題 :

發表於 : 2006-09-04, 18:39

註冊時間: 2005-01-16, 13:34
文章: 131

剛剛用 Opera 9.0 測過了，似乎沒有支援 :nth-child(n) 這個 selector 。

在已知 table 行數的情況下，可以利用 adjacent selector 對 rows 逐一的進行 style ，但這是非常冗長而麻煩的，我想這並不是你想要的方法…。

_________________
Notes redesigned.
--
Opera 9.5 just tastes good. ;-)

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

wini

文章主題 :

發表於 : 2006-09-05, 22:35

[網站管理員]

註冊時間: 2005-01-02, 05:49
文章: 3220

李某人寫:

感謝回應。

我的目的只是單純想要讓表格隔行變色，這樣看起來比較不會分不清楚哪一格資料是哪一行的而已。

看來還是要再等 Fx 或 Flock 支援的時候才行呀。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

風痕影

文章主題 :

發表於 : 2006-09-06, 17:36

[MozTW 版主群]

註冊時間: 2004-11-17, 09:53
文章: 1302
來自: 臺灣桃園

wini 寫:

3. 用好像是 IE Only 的 CSS 語法來處理

您說的是否為 IE 的 Expression？

不過說到 Expression，就讓我想到一種可行的方法
這種方法和 5. 全用 HTML 來處理，以及...
1. 老實地為 HTML 上 class 再用 CSS 處理 很像
卻是由 JavaScript 來代勞，用迴圈跑過表格裡的每一列
自動隔一列加上一個 class (或直接加上樣式) ^^

如果這個表格的頁面是動態產生的話就更方便了
可以在印出 HTML 時自動隔一列加上去 XD

_________________
在靜謐的國度裡，擁抱微風－－抱風伴靜

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

wini

文章主題 :

發表於 : 2006-09-08, 22:35

[網站管理員]

註冊時間: 2005-01-02, 05:49
文章: 3220

風痕影寫:

wini 寫:

3. 用好像是 IE Only 的 CSS 語法來處理

您說的是否為 IE 的 Expression？

我用 Google 找「表格隔行 TABLE CSS 」時，的確是找到很像在寫 JavaScript 的 expression 語法，我想應該跟你說的是一樣的吧。

總之希望 Fx 也能快點有相關的支援。（汗）

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

第 1 頁 (共 1 頁)

[ 7 篇文章 ]

MozTW » 討論區首頁 » 特別議題 » 問題網站與網頁技術傳教

所有顯示的時間為 UTC + 8 小時

誰在線上

正在瀏覽這個版面的使用者：沒有註冊會員和 9 位訪客

您不能在這個版面發表主題
您不能在這個版面回覆主題
您不能在這個版面編輯您的文章
您不能在這個版面刪除您的文章
您不能在這個版面上傳附加檔案

前往 :