Question

我正在尝试使用以下代码将斑马条添加到表中，但它不起作用。当使用inspect元素时，表的边框不起作用。而且也看不到斑马效应在桌子上。

<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");
});

Answer 1

试试这个，

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

普通css会这样做....不需要Javascript

Answer 2

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

此外，您的十六进制值无效，这就是他没有应用颜色的原因。

为什么它们无效？因为它们上面有S。十六进制颜色中唯一有效的字符是： 0，1, 2，3，4，5，6，7，{{1 }}，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*/
}

Answer 3

因为你在rgb中使用了'S'而无法正常工作。
RGB仅范围从A到F和0到9
只需更改类斑马和斑马1

.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;
}

在桌子上创建斑马条纹效果

3 个答案: