關於table表頭的css問題

https://jsfiddle.net/aom1shfq/35/
就是我在table id裡面原本有寫三條css,表頭列、(表頭以外的單數、雙數列)
原本應該要像這樣  例   黑 黑 黑(表頭)
                                     藍 藍 藍
                                     綠 綠 綠  
                                     藍 藍 藍
                                     綠 綠 綠

可是顯示成這樣        藍 藍 藍
                                 綠 綠 綠
                                 藍 藍 藍 
                                 綠 綠 綠
                                 藍 藍 藍
他把表頭加到單、雙數的判定裡了,是為何呢? 謝謝

html
css
發問時間:2016-08-11 01:41
阿川先生
54

此問題由我Email轉錄至此。得到回答後將轉貼給原發問者 – 阿川先生 01:43
新增推文
發問注意事項
  • 一次問一個問題。多個問題請分多次發問
  • 請盡量清楚描述您的問題
  • 請描述您做過哪些嘗試、試過哪些方法
  • 請盡可能地提供細節,幫回答者節省時間

1 個回答

1
table#a01 tr:nth-child(even) {
      background-color: #6B8123;
    }    
table#a01 tr:nth-child(odd) {
      background-color: #eee;
    }
css 裡面定義 table 裡單數列(odd)背景色為 #eee;雙數列(even)為背景色為 #6B8123。

而表頭也算是一列(tr),所以表頭其實會是第一列也就是第一個單數列,背景色當然就是 #eee
     <tr>
        <th>年度</th>
        <th>每股現金股利</th>
        <th>每股股票股利</th>
        <th>合計</th>
        <th>現金股利總額 (單位:億元新台幣)</th>
        <th>持股比例 (%)</th>
        <th>被投資公司</th>
      </tr>

如果想要達成目標的效果可以這樣,一般 html 會把表頭包在 thead 當中,而表格內容包在 tbody 當中,如下
<thead>
     <tr>
        <th>年度</th>
        <th>每股現金股利</th>
        <th>每股股票股利</th>
        <th>合計</th>
        <th>現金股利總額 (單位:億元新台幣)</th>
        <th>持股比例 (%)</th>
        <th>被投資公司</th>
      </tr>
</thead>
<tbody>
      <tr>
        <td>100</td>
        <td>1</td>
               .
               .
               .
       </tr>
</tbody>

這樣 css 就可以改成

table#a01 tbody tr:nth-child(even) {
      background-color: #6B8123;
    }    
table#a01 tbody tr:nth-child(odd) {
      background-color: #eee;
    }

目標達成!

回答時間:2016-08-11 12:07
chenjenping
24

新增推文