Customize row backgroud color #41527

ya7yawii · 2025-06-07T15:13:37Z

ya7yawii
Jun 7, 2025

Is it possible to change the background color to white for the last two rows of a striped table?

I tried these two approches but didn't work:

Add bg-white class to the two rows
Create a new class in a separate css style sheet shuch as:

.white-row tr {
    background color:  white;
}

Here is my code:

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, width=device-width">

        <!-- http://getbootstrap.com/docs/5.3/ -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

        <title> Example code </title>

    </head>

    <body>

        <main class="container py-5 text-center">
            <div class="container">
                <div class="row justify-content-center">
                    <table class="table table-striped w-75 p-3 justify-content-center">
                        <thead>
                            <tr>
                                <th class="text-start">Symbol</th>
                                <th class="text-end">Shares</th>
                                <th class="text-end">Price</th>
                                <th class="text-end">TOTAL</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-start"> NFLX </td>
                                <td class="text-end"> 1 </td>
                                <td class="text-end"> $486.88 </td>
                                <td class="text-end"> $486.88 </td>
                            </tr>
                            <tr>
                                <td  class="border-0"></td>
                                <td  class="border-0"></td>
                                <th  class="border-0 text-end"> Cash </th>
                                <td  class="border-0 text-end"> $9,513.12 </td>
                            </tr>
                            <tr>
                                <td class="border-0"></td>
                                <td class="border-0"></td>
                                <th class="border-0 text-end"> TOTAL </th>
                                <td class="border-0 text-end"> $10,000.00 </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </body>

</html>

The desired look for the table:

GeorgiosDrivas · 2025-06-07T19:16:52Z

GeorgiosDrivas
Jun 7, 2025

Hello! Can you share the specific part of the code?
I believe this can be done with css selectors

4 replies

GeorgiosDrivas Jun 7, 2025

Generally if you want to target specific child elements of a parent element you can use something like this:

.table tr:nth-last-child(-n + 3){
background-color: white;
}

GeorgiosDrivas Jun 8, 2025

specifically since you shared your code, you can write something like this:
.table tbody tr:nth-last-child(-n + 2) { background-color: white !important; }
In order to change the color of the last rows

ya7yawii Jun 9, 2025
Author

I found the answer in another forum. The reason why it is not working is, that Bootstrap does not use background-color to create the effect but a box-shadow. I simply have to remove the box-shadow or make it transparent.

GeorgiosDrivas Jun 10, 2025

Great!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

Customize row backgroud color #41527

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Bootstrap

Customize row backgroud color #41527

Uh oh!

Uh oh!

ya7yawii Jun 7, 2025

Replies: 1 comment · 4 replies

Uh oh!

GeorgiosDrivas Jun 7, 2025

Uh oh!

GeorgiosDrivas Jun 7, 2025

Uh oh!

GeorgiosDrivas Jun 8, 2025

Uh oh!

ya7yawii Jun 9, 2025 Author

Uh oh!

GeorgiosDrivas Jun 10, 2025

ya7yawii
Jun 7, 2025

Replies: 1 comment 4 replies

GeorgiosDrivas
Jun 7, 2025

ya7yawii Jun 9, 2025
Author