Please note, this is a STATIC archive of website www.tutorialrepublic.com from 10 Sep 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.
WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to highlight the background of alternate table row using CSS

Topic: HTML / CSSPrev|Next

Answer: Use the CSS ":nth-child" selector

You can use the CSS3 :nth-child selector to highlight the background of alternate table row for creating a zebra-striped table. The :nth-child(N) pseudo-class accepts an argument N, which can be a keyword, a number, or a number expression of the form xn+y where x and y are integers (e.g. 1n, 2n, 3n, 2n+1, 3n-2, …). Try out the following example to see how it works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Coloring Alternate Table Row Using CSS</title>
<style>
    table{
        margin: 30px;
        border-collapse: collapse;
    }
    table tr{
        border-bottom: 1px solid #666;
    }
    table tr:nth-child(2n){
        background: #f2f2f2;
    }
    table th, table td{
        padding: 10px;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Rambo</td>
            <td>johnrambo@mail.com</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Harry</td>
            <td>Potter</td>
            <td>harrypotter@mail.com</td>
        </tr>
    </table>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements
Bootstrap UI Design Templates