Forum Home
PC World Chat
 
Thread ID: 129291 2013-02-15 03:12:00 Need help with CSS shading wallarro (11242) PC World Chat
Post ID Timestamp Content User
1328177 2013-02-15 03:12:00 Hi guys,

Hopefully there is a CSS expert who can help.

I am trying to create a table with alternative background colour for easier readability.

4781

The problem is the table is nested so when I used the below css:


tr:nth-child(even) {
background: #cccccc;
}
tr:nth-child(odd) {
background: white;
}

it become like this:

4782

What I need is for the whole row 1, 3, 5 etc to be shaded.

I know I can manually use alternative class to mark the shaded row but the problem is I often inserted a new row and the result is an odd row can change to even or vice versa and I have to change the rest manually which is a pita.

Thanks! 		wallarro (11242)
1328178 2013-02-15 06:04:00 The CSS for this should be:


tr:nth-child(-n+2) { background-color: #ccc; }

Though I have reason to believe this may not work for you.

If I can make a working example, I'll post it.

Cheers,

KK 		Kame Krazee (498)
1328179 2013-02-15 06:32:00 I was about to give up on this but I realised a pattern I could work with so here's the complete working example I have


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS Background Color Alternate Rows</title>
<style>
table, tr, td, th {
border: 1px solid blue;
border-collapse: collapse;
}
tbody tr:nth-child(4n+1), tbody tr:nth-child(4n+2) {
background-color: gray;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th><abbr title="Number">No</abbr></th>
<th>Name</th>
<th>Description</th>
<th>Availability</th>
<th>Overview</th>
<th>Setup Guide</th>
<th>Support</th>
<th>More <abbr title="Information">Info</abbr></th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">First</td>
<td>First</td>
<td><abbr title="United Kingdom">UK</abbr></td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="6">Note:</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td rowspan="2">Second</td>
<td>Second</td>
<td><abbr title="New Zealand">NZ</abbr></td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="6">Note:</td>
</tr>
<tr>
<td rowspan="2">3</td>
<td rowspan="2">Third</td>
<td>Third</td>
<td><abbr title="Australia">AU</abbr></td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="6">Note:</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">First</td>
<td>First</td>
<td><abbr title="United Kingdom">UK</abbr></td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="6">Note:</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td rowspan="2">Second</td>
<td>Second</td>
<td><abbr title="New Zealand">NZ</abbr></td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="6">Note:</td>
</tr>
<tr>
<td rowspan="2">3</td>
<td rowspan="2">Third</td>
<td>Third</td>
<td><abbr title="Australia">AU</abbr></td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="6">Note:</td>
</tr>
</tbody>
</table>
</body>
</html>


If I could post an attachment I would have shown you what it looks like, but I think this is what you want.

Cheers,

KK

P.S. I knew Algebra was good for something... 		Kame Krazee (498)
1328180 2013-02-16 00:17:00 It works! Thanks!

4787

It would be great if you can teach me where you get the tr:nth-child(4n+1) and tbody tr:nth-child(4n+2) from .

Thanks again,
W . 		wallarro (11242)
1328181 2013-02-16 03:30:00 I should have editted the rows to represent the right numbers, but I got lazy and just copy and pasted it again but I'm glad it works.

This is pretty basic CSS3 selector knowledge and with any recommendations it's usually best reading it from www.w3c.org and trying to understand it from them. If you also have trouble with that, many places have tried showing examples of how to use these selectors, but whether they teach you how to do it all I am not sure. It's really just doing it to your understanding, I was pretty good at maths so understanding algebraic equations to work with the nth-child wasn't a problem.

Ever since CSS3 came about, I liked it but I also wish it had more. They have a :not selector, but I wish there were more truth value equivalents in the language like :or and :and because then it would have turned my example above into 1 selector method instead of 2. Another worthy thing would be having variables, if I want to update a CSS file to change color, etc, it's just too much work to go through everything to change it line by line, especially if I used shades of the same color, like I need to add maybe a 10% lightness to the color or something, if you could set the variables at the top for color, perform calculations on it (CSS3 has calc() but it mainly used on size units and it feels backwards and has it's own problems). This would allow for a much easier way of handling CSS.

I use things like LESS or SASS to do my CSS now, as it gives you those features and compiles back to CSS, saves a lot of time which is what you need to do when making websites and supporting them.

I am not really big on using tables as most of the things I do don't suit using tables to display data but if you feel that tables represents your data then by all means use them.

If you have any other problems, web related, even dynamic languages like PHP, etc, I don't mind helping out though you should have posted this in the other section of the board, it's computer related, not really general discussion and you may have received more help.

Cheers,

KK 		Kame Krazee (498)
1