所有table行都成有兩色相間的斑馬紋 

CSS:
table{
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
}

原以為表格要變成斑馬紋很難搞,原來只要加這麼一句就行了, 原來那段表示tr出現的偶數(even)行換背景色就淺灰.
反之,如要奇數行則傳odd取代even.
如要指定特定行則給行數就行了如 p:nth-child(3) {…}
真是夠簡單了.

W3Schools的教學:

https://www.w3schools.com/howto/howto_css_table_zebra.asp

https://www.w3schools.com/cssref/sel_nth-child.asp

本篇發表於 HTML&CSS。將永久鏈結加入書籤。

發佈留言