CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Priyanka Maurya
Priyanka Maurya

Reputation: 443

Create zebra striping effect on table

I am trying to add zebra strips to the table by using following code but its not working. When used inspect element the border of the table is not working. And also cannot see the zebra effect on the table. 

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

Upvotes: 0

Views: 206

Answers (3)

Biboy
Biboy

Reputation: 36

  • It will not work because you used 'S' in the rgb.
  • RGB only range from A TO F and 0 to 9
  • just change the background color of class zebra and 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;
}

Upvotes: 0

Joel Almeida
Joel Almeida

Reputation: 8037

You can use the nth-child(even) instead of using jQuery.

Also, your hex values are invalid that's why he is not applying the color.

Why are they invalid ? Because they have an S on it. The only valid characters in a hex color are: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

So, use nth-child(even) and nth-child(odd) and apply valid hex values in the colors.

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>

Upvotes: 2

user2879704
user2879704

Reputation:

Try this,

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

Plain css will do this.... no Javascript is needed

Upvotes: 2

Related Questions