前端開發之CSS實現表格隔行換色

我們在做前端開發的時候會經常用表格（table），說實話，在小編眼裡通常表格都是用來展示數據用的，所以有時候吧，為了效果好些，同時也為了讓用戶不看花眼，我就會把數據表格做成隔行換色，就像下面這樣：

這樣的效果大家應該不陌生，很多地方都能看到這種效果，那麼這種效果實現起來難嗎？說真的，如果不考慮ie9以下的瀏覽，那麼這就是一行代碼的事兒，不信？那就直接上代碼：

css樣式

html代碼

看到圖中我用紅框框起來的代碼了嗎？實現隔行換色就這一行代碼就搞定了。

nth-child() 是css3中一個選擇器，tr:nth-child(odd) 這樣就是說 tr 是奇數行的時候就顯示這個樣式，如果要實現偶數行換色那就使用 tr:nth-child(even) 就可以了。

這個方法只支持 ie9 或以上瀏覽器，其它的像火狐，谷歌，Safari ，Opera都支持的。那如果要考慮兼容性，比如要支持ie9以下瀏覽器的話，那麼可以用 jquery 方法，用 jquery 實現也很簡單，直接上代碼：

也是一行代碼的事，用 jquery 方法的時候記得要引入 jquery 庫哦，要不然也是沒效果的哈。當然，要實現這種效果還有很多方法，這裡小編就只介紹這兩種最常用，最簡單的方法，有鑽研精神的網友們可以研究一下有沒有更好的方法，研究出來了記得告訴我一下哈。

謝謝你的閱讀，如果你有更好的方法或在應用過程中遇到問題可以在評論區提問或者直接私信我，我會定期回覆，碼農劉小橋與你一起學習，共同進步。