我正在尝试通过使用以下代码将斑马条添加到表中，但无法正常工作。使用检查元素时，表格的边框不起作用。而且也看不到桌上的斑马效果。
<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");
});
最佳答案
尝试这个，
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
普通的CSS可以做到这一点。
关于javascript - 在 table 上创建斑马条纹效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32601912/