[CSS]Table底色奇偶相間隔

2019-06-12

1790
0
系列文章
2019-06-13

想要畫一個Tabel，用顏色區隔奇偶行數，

運用CSS就可以簡單做到

/*表格中的偶數對 tr*/
tr:nth-child(even){background-color:#e8e8e8;}
/*表格中的奇數對 tr*/
tr:nth-child(odd){background-color:#0094ff;}

加入以上CSS之後就會出現下面效果

若只想要針對[標題]進行顏色調整，表格中第一個 tr

/*表格中的第一個tr : 虛擬選擇器*/
tr:nth-child(1){background-color:#7788aa;color:#ffffff;}

加入CSS之後就會出現以下畫面

範例程式碼

HTML部分：

 <table class="myTable">
        <tr><td>標題一</td><td>標題二</td></tr>
        <tr><td>我是第一行</td><td>我是第一行</td></tr>
        <tr><td>我是第二行</td><td>我是第二行</td></tr>
        <tr><td>我是第三行</td><td>我是第三行</td></tr>
        <tr><td>我是第四行</td><td>我是第四行</td></tr>
 </table>

CSS部分：

<style type="text/css">
 　/*關於Tabel的CSS設定*/
　　.myTable {border-collapse:collapse;width: 400px;}
　　.myTable td {border: 1px solid #888888;padding: 10px;}
 　/*表格中的第一個tr : 虛擬選擇器*/
   .myTable tr:nth-child(1){background-color:#7788aa;color:#ffffff;}
  /*表格中的偶數對 tr*/
   .myTable tr:nth-child(even){background-color:#e8e8e8;}
</style>

回首頁