How to create different background for my Table row nth-child?

February 19, 2023

I have created a table by using the external grid js library. I am facing some issues in styling the table. I want to change the background color of all the rows by leaving one row. I am using the code tr.gridjs-tr:nth-child(even) {background: #47bb60;} but It’s not working. Can you suggest to me, What is missing in the CSS?

new gridjs.Grid({

    columns: ["Name", "Email", "Phone Number"],
    data: [
    ["John", "john@example.com", "(353) 01 222 3333"],
    ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
    ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
    ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
    ],

    sort: true,
    Default: true,
    style: {
        table: {
            border: '3px solid #ccc'
        },
        th: {
            'background-color': 'rgba(0, 0, 0, 0.1)',
            'color': '#fff',
            'border-bottom': '3px solid #ccc',
            'text-align': 'center'
        },
        td: {
            'text-align': 'center'
        },
    }


}).render(document.getElementById("wrapper"));

th {
    box-sizing: border-box;
    background: #1f61cf;
    color: #fff;
}

tr.gridjs-tr:nth-child(even) {
    background: #47bb60;
}

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet">
    <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />

</head>

<body>
<div id="wrapper"></div>


    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
    <script type="text/javascript" src="js.js"></script>

</body>

</html>

>Solution :

If you want to change the row color alternatively, select the tr using nth-child(even/odd) and then apply the background color to td

new gridjs.Grid({

    columns: ["Name", "Email", "Phone Number"],
    data: [
    ["John", "john@example.com", "(353) 01 222 3333"],
    ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
    ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
    ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
    ],

    sort: true,
    Default: true,
    style: {
        table: {
            border: '3px solid #ccc'
        },
        th: {
            'background-color': 'rgba(0, 0, 0, 0.1)',
            'color': '#fff',
            'border-bottom': '3px solid #ccc',
            'text-align': 'center'
        },
        td: {
            'text-align': 'center'
        },
    }


}).render(document.getElementById("wrapper"));

th {
    box-sizing: border-box;
    background: #1f61cf;
    color: #fff;
}

.gridjs-tr:nth-child(even) td {
    background: #47bb60;
}

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet">
    <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />

</head>

<body>
<div id="wrapper"></div>


    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
    <script type="text/javascript" src="js.js"></script>

</body>

</html>