服務信箱：sr.design2011@gmail.com搜尋本網站

SR網頁設計工作室 - 購物網站/企業官網專業開發

搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 › HTML/CSS 語法 › 網頁設計表格(Table)偶數奇數行不同背景顏色美化 ...

[CSS相關] 網頁設計表格(Table)偶數奇數行不同背景顏色美化

byadmin 發表於 2015-5-13 17:50:58 , 7369人已閱讀 , 1人回應
製作表格的時候，相信很多人經常會需要針對表格背景去進行美化(不然真的是太醜了)，尤其是針對奇偶數行運用不同顏色進行美化，以達到強化或輔助網站使用者的閱讀體驗。若是靜態化網站(非資料庫型)，還可以針對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
CSS3, 選擇器, 表格, 美化

相關帖子

收藏回覆 只看該作者 道具 舉報

沙發
返回列表
Traffic Exchange Site
高級模式
B Color Image Link Quote Code Smilies
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

admin

文章分類

Contact us

歡迎您使用以下方式聯繫我們 , 本工作室服務時間為每日早上10:00點至晚間7:30點 ,也可點選下方 Contact us 進入留言板留下您的問題與相關聯絡資訊 , 我們將會儘快了解與回覆您。

SR數位設計工作室

  • 服務專線：03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱：sr.design2011@gmail.com

本網站推薦使用以下瀏覽器 (請點擊圖式下載)

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

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

Core - DZ2.5　GMT+8, 2024-11-23 16:19

回頂部