Tips on setting background color for ODD and EVEN rows using PHP?

I am looking to incorporate background colors for alternating rows, with odd rows being #e5e8e8 and even rows being #b9b8bb, using CSS.

for ($i = 2; $i <= $arrayCount; $i++) {

        $_SESSION["a"] = trim($allDataInSheet[$i]["A"]);
        $_SESSION["b"] = trim($allDataInSheet[$i]["B"]);
        $_SESSION["c"] = trim($allDataInSheet[$i]["C"]);
        $_SESSION["d"] = trim($allDataInSheet[$i]["D"]);
        $_SESSION["e"] = trim($allDataInSheet[$i]["E"]);
        $_SESSION["f"] = trim($allDataInSheet[$i]["F"]);
        $_SESSION["g"] = trim($allDataInSheet[$i]["G"]);

                       echo '<!-- table content - start --> ';
                       echo ' <!-- ROW 1 -->';
                        echo '<tr>';
                            // table cells and content here
                        echo '</tr>';

   }

I am trying to dynamically add background colors of #e5e8e8 for odd rows and #b9b8bb for even rows in PHP within a for loop. The table code provided is for an Email template and contains many divs and tables, making it difficult to implement the ODD and EVEN options effectively. Any suggestions on how to achieve this would be greatly appreciated. Thank you.

Answer №1

If we avoid digging too deep into your code for corrections, here is a more general example since this seems to be a CSS question. To achieve this, you would typically use the nth-child() selector. Here is a basic example:

tr:nth-child(odd){ background-color:#e5e8e8; }
tr:nth-child(even){ background-color:#b9b8bb; }
<table>
    <tr>
        <td> Row 1</td>
    </tr>
    <tr>
        <td>
            Row 2
        </td>
    </tr>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Conditionals in Angular 2 using Sass

Looking to apply this style with Sass or CSS: IF :host.form-control MATCHES .ng-valid[required] OR .ng-valid.required THEN :host ::ng-deep input.form-control = border-left: 5px solid #42A948; Appreciate the help! ...

When the next button is clicked, the button content disappears

I am struggling with a problem involving two buttons that store tables. The issue is, I want the table to disappear when the second button is clicked and show the contents of the second button immediately after clicking it once, rather than having to click ...

To modify the color of text in a mat-list-option item

Using the mat-selection-list component, I have set up a list of contacts displayed through mat-list-option: https://i.sstatic.net/ri4lP.png Currently, the background-color changes when I click on a specific contact-name (e.g. Graeme Swan), and it remains ...

What is the best way to use a computed property as a style value for a component in Vue.js?

My component's template includes the following HTML element: .grid-item(:style="{ width: columnWidth, backgroundColor: 'blue' }") I want to dynamically set the width of this element using a computed property: computed: { columnWidth () ...

How come my keyframes animation isn't functioning properly on my div element?

I am currently designing a custom animation for a checkers game. My goal is to create an effect where the checker piece moves slowly to its next spot on the board. Below is the CSS code I have used: @keyframes animateCheckerPiece { 0% {top: ...

Is anyone else experiencing issues with loading a font from a CDN? It works perfectly fine on Chrome Browser and Safari for iOS Simulator, but for some reason, it's not loading

It's driving me a bit crazy as I'm not sure where I've gone wrong. I'm currently working with NextJS and have loaded this font into my <Link />. While it displays perfectly on Chrome and Safari in the iOS simulator, it fails to l ...

Ways to add style to Chrome without causing any changes in Edge

I'm working on fixing a bug in Chrome and have successfully applied a style to correct it. However, when I view it in Edge, the appearance is not right. How can I target only Chrome (version 60) with my styles, without affecting other browsers? @medi ...

Modifying the appearance of PHP code by applying CSS styles to the font

Here is the HTML code: <!DOCTYPE html> <html> <head> <title>Greeting Service!</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' /& ...

The menu in IE7 seems to have a mind of its own, appearing and

Having trouble with my menu displaying correctly in IE7. It seems to be a stacking issue: the menu initially appears but disappears once the header image and rest of the page load. I've tried adjusting the z-index values in both the menu and its paren ...

What is the best way to split an input field into distinct fields for display on the screen?

Take a look at this image: https://i.stack.imgur.com/LoVqe.png I am interested in creating a design similar to the one shown in the image, where a 4 digit one-time password (OTP) is entered by the user. Currently, I have achieved this by using 4 separate ...

How to make stylish block buttons with ReactJS and Bootstrap

I'm looking to make block buttons that fill the entire div. In React, I'm using the react-bootstrap package to achieve this. Below is the code snippet I have implemented: <Container> <Row className="justify-content-center"& ...

What could be hindering the animation of this button?

I found this snippet on a coding blog, where the design looked perfect: However, when I tried implementing it, the button displayed a static gradient instead of animated. Additionally, aligning the text in the center vertically seems to be trickier than e ...

What about employing the position:fixed property to create a "sticky" footer?

I've come across various methods for creating a sticky footer, such as Ryan Fait's approach found here, another one here, and also here. But why go through the trouble of using those techniques when simply applying #footer{position:fixed; bottom ...

What is the best way to place a div inside a navbar element inline?

Having a bit of trouble with my HTML code. I'm working on creating an offcanvas navbar. Here's the code snippet: <nav class="navbar navbar-dark bg-dark"> <div class="container-fluid"> <a cl ...

Is it necessary for CSS Media query to load all the referenced CSS files?

When utilizing a CSS Media Query to assign two different stylesheets, such as desktop.css and mobile.css based on the max-width, how does this process function? Is it necessary for both stylesheets to be loaded by the browser every time, and then the appr ...

The image in drag and drop ghost preview is not appearing on Firefox

I want to show a ghost element instead of the default browser preview while dragging and dropping. However, in Firefox, the image inside the ghost element is not displayed during dragging. Oddly enough, if I drop it and then drag again, the image does appe ...

Lost: pointer for speech bubble

Here is the HTML code I have written: <!DOCTYPE html> <html> <head> <style type="text/css"> #box { width: 200px; height: 250px; border-radius: 15px; background-color: pink; ...

Creating a personalized notification box that is compatible with various screen sizes and web browsers on android devices with the help of

After successfully implementing a custom alert box to hide the header with JavaScript, I encountered an issue when trying to use it on different browsers and Android devices. The alert box appeared misplaced on the page and was too big for certain Android ...

Develop rounded edges for a div element

I am interested in developing an HTML-based chart similar to the one shown below, but I am unsure of the steps to take. https://i.sstatic.net/2jLPO.png ...

Center two lines of text in a div in a vertical fashion

After going through several articles on this topic, I've picked up some tricks for vertical alignment like using line-height for a single line of text, display:table for multiple divs, and Flexbox in CSS3. However, I'm still struggling to align t ...