在表格上創建斑馬條紋效果

我想通過使用下面的代碼將斑馬條添加到表格中，但它不工作。當使用檢查元素時，表格的邊界不起作用。並且也無法在桌上看到斑馬效果。在表格上創建斑馬條紋效果

<body> 
    <div class="table_style"> 
     <table border="true"> 
      <tr> 
       <th>Student Name</th> 
       <th>Marks in Science</th> 
      </tr> 
      <tr> 
       <td>Janet</td> 
       <td>85.00</td> 
      </tr> 
      <tr> 
       <td>David</td> 
       <td>92.00</td> 
      </tr> 
      <tr> 
       <td>Arthur</td> 
       <td>79.00</td> 
      </tr> 
      <tr> 
       <td>Bill</td> 
       <td>82.00</td> 
      </tr> 
     </table>  
    </div> 
</body>

.table_style { 
    width: 500px; 
    margin: 0px auto; 
} 
table { 
    width: 100%; 
    border-collapse: collapse; 
} 
table tr td { 
    width: 50%; 
    border: 1px solid #D0FSA9; 
    padding: 5px; 
} 
table tr th { 
    border: 1px solid #D0FSA9; 
    padding: 5px; 
} 
.zebra { 
    background-color: #D0FSA9; 
} 
.zebra1{ 
    background-color: #E0FSA0; 
}

$(document).ready(function(){ 
    $("tr:odd").addClass("zebra"); 
    $("tr:even").addClass("zebra1"); 
});

來源

2015-09-16 Priyanka Maurya

您的十六進制值是無效的，看演示在這裏http://jsfiddle.net/6rg90rfz/2/ – sajanyamaha

試試這個，

tr:nth-child(even) {background: #CCC} 
tr:nth-child(odd) {background: #FFF}

純CSS將做到這一點....沒有JavaScript是需要

來源

2015-09-16 07:13:10

可以使用nth-child(even)，而不是使用jQuery的。

此外，你的十六進制值是無效的，這就是爲什麼他不應用這種顏色。

他們爲什麼失效？因爲他們有一個S就可以了。在十六進制顏色，唯一有效的字符爲： 0，1,2，3，4，5，6，7，8，9，A，B，C，D，E，F

所以，使用nth-child(even)和nth-child(odd)並在顏色中應用有效的十六進制值。

table tr:nth-child(odd) { 
 
    background-color: red; 
 
} 
 
table tr:nth-child(even) { 
 
    background-color: blue; 
 
} 
 

 
table tr:first-child { 
 
    background-color: transparent; /*headers*/ 
 
}

<div class="table_style"> 
 
    <table border="true"> 
 
    <tr> 
 
     <th>Student Name</th> 
 
     <th>Marks in Science</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Janet</td> 
 
     <td>85.00</td> 
 
    </tr> 
 
    <tr> 
 
     <td>David</td> 
 
     <td>92.00</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Arthur</td> 
 
     <td>79.00</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Bill</td> 
 
     <td>82.00</td> 
 
    </tr> 
 
    </table> 
 
</div>

來源

2015-09-16 07:13:57

謝謝..實際上只是十六進制值的變化就夠了..它工作。 –

@PriyankaMaurya但沒有必要使用jQuery，只能使用CSS。它更好。 –

好的..我只是用jQuery來試用它。 –

它不會工作，因爲你使用的 'S' 在RGB。
RGB從A到F僅範圍0〜9
只是改變類斑馬的背景顏色和ZEBRA1

.table_style { 
 
    width: 500px; 
 
    margin: 0px auto; 
 
} 
 
table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
} 
 
table tr td { 
 
    width: 50%; 
 
    border: 1px solid #D0F3A9; 
 
    padding: 5px; 
 
} 
 
table tr th { 
 
    border: 1px solid #D0F3A9; 
 
    padding: 5px; 
 
} 
 
.zebra { 
 
    /*background-color: #D0F3A9;*/ 
 
    background-color: blue; 
 
} 
 
.zebra1{ 
 
    /*background-color: #D0ffA9;*/ 
 
    background-color: green; 
 
}

來源

2015-09-16 07:44:02 Biboy

在表格上創建斑馬條紋效果

回答

相關問題