CODEWITHSUNDEEP
jquerycsshtml-table
leora
leora

Reputation: 196891

In an alt row color html table, how could I color a few columns different

I have a html table and I am using alternative row colors (white and gray).

I now added a few more columns and I want to show that certain columns are grouped together so I colored the backcolor light green. The issue is that the alt row coloring looks weird as its not applied to those new green columns.

Is there anyway someone can think of a solution where I can change those columns to green but it still keep that alternative color affect on those columns?

Upvotes: 0

Views: 1192

Answers (4)

James Montagne
James Montagne

Reputation: 78770

How about something like this?

<table border="1">
    <tr class="even">
        <td>stuff</td>
        <td>stuff</td>
        <td>stuff</td>
        <td>stuff</td>
        <td class="special">stuff</td>
        <td class="special">stuff</td>
        <td>stuff</td>        
    </tr>
    <tr class="even">
        <td>stuff</td>
        <td>stuff</td>
        <td>stuff</td>
        <td>stuff</td>
        <td class="special">stuff</td>
        <td class="special">stuff</td>
        <td>stuff</td>        
    </tr>
</table>

.odd{
    background-color: gray;   
}

.special{
    background-color: #9999ff;   
}

.odd .special{
    background-color: #7777ff;   
}​

http://jsfiddle.net/ycdSr/

Just make the intersection a color that is similar to both colors combined.

Upvotes: 2

jeroen
jeroen

Reputation: 91792

Instead of light colours, you could use dark colours with a transparency value, so your grey background would be for example black with 90% transparency and your green would be dark green with 80% transparency (rgba values for modern browsers or png images with IE6 fix for older browsers).

That way, the green column would show the grey background below it, making it slightly darker green on the grey rows.

Edit: As a test in a modern browser you can use for example rgba(0,0,0,0.2) as your grey value and rgba(0,255,0,0.3) for your green value. Just see how it looks and if it works, you can fix it for older browsers as well.

Some more information about browser support for rgba.

And to make it work in IE8-.

Upvotes: 1

user753676
user753676

Reputation:

well if you give them a class you should also give the class the right css attributes and values, like Avitus says

Upvotes: 0

Avitus
Avitus

Reputation: 15968

I think it's a matter of order of operations. Do the alternating colors and then do the shading of the columns you want to group together changing the colors of those columns from the alternating to the shading colors.

Upvotes: 1

Related Questions