Pure.CSS Stripped Tables

If the table is large, it would better to make it stripped. The stripped table is more visible and attractive for the users. You have to add "pure-table-odd" class name to every other <tr> element to change the background of the row and creates a zebra-styled effect.

Note: In browsers which support the CSS3 nth-child pseudo selector a simpler approach can be used. The pure-table-striped classname can be added to the <table> element and the zebra-styled striping will happen automatically. This approach will not work in Internet Explorer 8 or lower.

Example:

<!DOCTYPE html>
<html>
<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
crossorigin="anonymous">

<table class="pure-table">
    <thead>
        <tr>
            <th>Roll no.</th>
            <th>Name</th>
            <th>Age</th>
            <th>Grade</th>
        </tr>
    </thead>

    <tbody>
       <tr class="pure-table-odd">
            <td>1</td>
            <td>Rahul</td>
            <td>22</td>
            <td>A</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Rishi</td>
            <td>21</td>
            <td>A</td>
        </tr>

        <tr class="pure-table-odd">
            <td>3</td>
            <td>Ariana</td>
            <td>20</td>
            <td>C</td>
        </tr>
        
        <tr>
            <td>4</td>
            <td>Tony</td>
            <td>21</td>
            <td>A</td>
        </tr>
        
        <tr class="pure-table-odd">
            <td>5</td>
            <td>Piyush</td>
            <td>18</td>
            <td>A</td>
        </tr>
        
       <tr>
            <td>6</td>
            <td>Lucky</td>
            <td>23</td>
            <td>B</td>
        </tr>
    </tbody>
</table>
</html>

Test it Now

Output: