Login/Register
Alternate Row Colours on Tables with Inline Style CSS
Asked Answered
Solved cssinline-styles
A

5

10

I want to alternate the background colour of a table to increase readability. After googling a bit I found the code I needed.

tr:nth-child(even) {
    background-color: #000000;
}

The problem in my solution, I don't have access to head tag, and I want to implement this with inline style CSS, but it doesnt work.

<tr style="nth-child(even) background-color: #000000;">

Ideas?

Adjust answered 23/4, 2013 at 14:2 Comment(6)
What do you mean you don't have access to the tag? Inline styles are a maintenance nightmare waiting to happen. – Twiddle
The first bit of css that you blocked out would belong in your stylesheet if you wanted to change the background color of every other row. The inline code that you wrote won't even work on itself because that particular row would be 'odd', as it would be the 1st child. – Christeenchristel
I wrote head tag but since I wrapped it around brackets, it didnt show in my questions. fixed now. The problem is that even if I add the whole table with these tr inline tags, it does not work. – Adjust
the 2nd code block makes absolutly no sense at all. – Decrepit
How to you purpose to write it inline style? – Adjust
The question was crystal clear about what @Adjust wanted. Idk what was the rocket science that people in comment section started digging into deep meaning. – Kho
D
9

Inline styles are per-element, so you would have to inject the appropriate styles into the style attribute of every other tr element. If you're not already generating these rows dynamically, and you cannot use JavaScript to inject these styles, then you're stuck with having to manually apply the attribute on each tr element.

Deontology answered 23/4, 2013 at 14:5 Comment(7)
Not stuck, but you'd have to apply the inline style for the background colors on every single row. Tedious, but possible. – Hartle
@Tanner: True, I've clarified it now. – Deontology
But even if I inject it on every tr, it doesn't work. What I do is that I add <tr style="nth-child(even) background-color: #000000;"> on every row of tr. I thought this would be like, if this row is even, make the background color black. – Adjust
You must remove nth-child(even) from that lines. That css selector is used to target, in this case, the table row. As you're targeting it already applying inline styles, in this case this selector is not necessary. – Befuddle
Ah ok, so I cant use the selector to "check" if this line is odd or even. How can I write a inline style that do something like "if this is an even line, apply background colour? – Adjust
@williamwmy: That's not possible. – Deontology
@Adjust Al least with pure css you can't. If you don't have access to the <head>tag, you can accomplish with the jQuery script I've suggested, inserted directly in the <body>tag. – Befuddle
E
12

I had a similar situation. I solved it by putting a style section just before my table:

<style>
    table#some_table_id tr:nth-child(even) { background-color:#dddddd; }
</style>
<table id="some_table_id">
    <!-- table markup removed -->
</table>

Not the most elegant solution, but it works for me (in Google Chrome 29.0.x).

Engelbert answered 4/9, 2013 at 19:1 Comment(0)
D
9

Inline styles are per-element, so you would have to inject the appropriate styles into the style attribute of every other tr element. If you're not already generating these rows dynamically, and you cannot use JavaScript to inject these styles, then you're stuck with having to manually apply the attribute on each tr element.

Deontology answered 23/4, 2013 at 14:5 Comment(7)
Not stuck, but you'd have to apply the inline style for the background colors on every single row. Tedious, but possible. – Hartle
@Tanner: True, I've clarified it now. – Deontology
But even if I inject it on every tr, it doesn't work. What I do is that I add <tr style="nth-child(even) background-color: #000000;"> on every row of tr. I thought this would be like, if this row is even, make the background color black. – Adjust
You must remove nth-child(even) from that lines. That css selector is used to target, in this case, the table row. As you're targeting it already applying inline styles, in this case this selector is not necessary. – Befuddle
Ah ok, so I cant use the selector to "check" if this line is odd or even. How can I write a inline style that do something like "if this is an even line, apply background colour? – Adjust
@williamwmy: That's not possible. – Deontology
@Adjust Al least with pure css you can't. If you don't have access to the <head>tag, you can accomplish with the jQuery script I've suggested, inserted directly in the <body>tag. – Befuddle
B
1

In addition to BoltClock answer, if you can use jQuery you can try something like this:

$('tr:nth-child(even)').css("background", "red");

This auto-insert inline styles in your markup.

A working fiddle

Befuddle answered 23/4, 2013 at 14:27 Comment(0)
E
1

So, I am actually using React... I wanted to get a table to display the rows in alternating colors. The code uses a lot of inline styling and there are some interesting syntax differences for css, but I thought I would share the piece of code that does it.

I am mapping through an array of lines of a report:

<tbody> <tr key={line.number} style={(line.number % 2) ? { backgroundColor: 'someColor' } : null}> ...code table column data here... </tr> </tbody>

I did find out that I cannot use this code; not because it doesn't work. Since there are lines that get skipped I still end up with rows of the same color next to each other. If I happen to figure that out I will update. For now, I guess I will just use borders.

-L-

Elemental answered 23/8, 2018 at 16:35 Comment(0)
E
-5

Here's what you're looking for, hope it helps. 

    tr:nth-child(even) {
        background-color: black;
        color: white;
    }

    tr:nth-child(odd) {
        background-color: #0000335f;
    }
    <table class="table">
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>text1</td>
          <td>text2</td>
          <td>text3</td>
          <td>text4</td>
          <td>text5</td>
        </tr>
      </tbody>
    </table>
Ence answered 15/3, 2018 at 19:28 Comment(1)
The question specifically asks about inline styling. – Delubrum

© 2022 - 2024 — McMap. All rights reserved.