搜索
SR數位設計 ECSHOP RWD響應式技術開發 HTML/CSS 語法 網頁設計表格(Table)偶數奇數行不同背景顏色美化 ...
byadmin 發表於 2015-5-13 17:50:58 , 1346人已閱讀 , 0人回應
製作表格的時候,相信很多人經常會需要針對表格背景去進行美化(不然真的是太醜了),尤其是針對奇偶數行運用不同顏色進行美化,以達到強化或輔助網站使用者的閱讀體驗。若是靜態化網站(非資料庫型),還可以針對TABLE每行設置不同class來進行美化,但對於程式設計師來說 , 很多時候表格都是透過程式循環輸出的,當然還是可以針對偶數奇數行的輸出去設置class,但是其實只要運用CSS3的選擇器語法就可以簡單解決這個問題 !

CSS3程式碼:
  1. tr:nth-child(even) {background: #FFF}//偶數行
  2. tr:nth-child(odd) {background: #EFEFEF}//奇數行
複製代碼
其他的HTML標籤也同樣可以使用nth-child() 語法喔 !

進階的運用方式可參考:CSS3 :nth-child() 選擇器

-美化效果示意圖-
CSS3選擇器表格美化.jpg
Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP響應式技術開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:service@uniflow.com.tw 連絡電話03-3555-069 (時間AM10:00~PM7:30)

, Processed in 0.190843 second(s), 43 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2017-4-24 23:17

回頂部