Mixing
Alternate row color
I want to display alternate rows in different color. I have specified the color in CSS. And most of the rows are working properly.When I checked, rows are having either class="odd" or class="even" but some rows are having class="odd even" and class="even odd". How it is happening ? Could anyone explain why it is taking the class as "odd even" or "even odd". Thanks in advance.
table.dataTable .odd { background-color: red; }
table.dataTable .even { background-color: green; }
css css-tables
edited Nov 20 '18 at 21:13
Brian Tompsett - 汤莱恩
4,2031338101
asked Jun 25 '13 at 11:11
kishorekishore
5363917
|
show 1 more comment
I want to display alternate rows in different color. I have specified the color in CSS. And most of the rows are working properly.When I checked, rows are having either class="odd" or class="even" but some rows are having class="odd even" and class="even odd". How it is happening ? Could anyone explain why it is taking the class as "odd even" or "even odd". Thanks in advance.
table.dataTable .odd { background-color: red; }
table.dataTable .even { background-color: green; }
css css-tables
edited Nov 20 '18 at 21:13
Brian Tompsett - 汤莱恩
4,2031338101
asked Jun 25 '13 at 11:11
kishorekishore
5363917
Could you post some code, please?
– Henrik Andersson
Jun 25 '13 at 11:12
Are you using pagination?
– Ana Sampaio
Jun 25 '13 at 11:13
you have a try code please post your code
– Falguni Panchal
Jun 25 '13 at 11:13
2
"How it is happening ?" Who knows.... We don't have your code in front of us...
– Nick R
Jun 25 '13 at 11:13
3
No, you've attached your CSS, that isn't code. How are you adding the classes to the<tr>tags?
– Nick R
Jun 25 '13 at 11:15
|
show 1 more comment
I want to display alternate rows in different color. I have specified the color in CSS. And most of the rows are working properly.When I checked, rows are having either class="odd" or class="even" but some rows are having class="odd even" and class="even odd". How it is happening ? Could anyone explain why it is taking the class as "odd even" or "even odd". Thanks in advance.
table.dataTable .odd { background-color: red; }
table.dataTable .even { background-color: green; }
css css-tables
edited Nov 20 '18 at 21:13
Brian Tompsett - 汤莱恩
4,2031338101
asked Jun 25 '13 at 11:11
kishorekishore
5363917
I want to display alternate rows in different color. I have specified the color in CSS. And most of the rows are working properly.When I checked, rows are having either class="odd" or class="even" but some rows are having class="odd even" and class="even odd". How it is happening ? Could anyone explain why it is taking the class as "odd even" or "even odd". Thanks in advance.
table.dataTable .odd { background-color: red; }
table.dataTable .even { background-color: green; }
css css-tables
css css-tables
edited Nov 20 '18 at 21:13
Brian Tompsett - 汤莱恩
4,2031338101
asked Jun 25 '13 at 11:11
kishorekishore
5363917
edited Nov 20 '18 at 21:13
Brian Tompsett - 汤莱恩
4,2031338101
asked Jun 25 '13 at 11:11
kishorekishore
5363917
edited Nov 20 '18 at 21:13
Brian Tompsett - 汤莱恩
4,2031338101
edited Nov 20 '18 at 21:13
Brian Tompsett - 汤莱恩
4,2031338101
edited Nov 20 '18 at 21:13
Brian Tompsett - 汤莱恩
4,2031338101
4,2031338101
asked Jun 25 '13 at 11:11
kishorekishore
5363917
asked Jun 25 '13 at 11:11
kishorekishore
5363917
asked Jun 25 '13 at 11:11
kishorekishore
5363917
5363917
Could you post some code, please?
– Henrik Andersson
Jun 25 '13 at 11:12
Are you using pagination?
– Ana Sampaio
Jun 25 '13 at 11:13
you have a try code please post your code
– Falguni Panchal
Jun 25 '13 at 11:13
2
"How it is happening ?" Who knows.... We don't have your code in front of us...
– Nick R
Jun 25 '13 at 11:13
3
No, you've attached your CSS, that isn't code. How are you adding the classes to the<tr>tags?
– Nick R
Jun 25 '13 at 11:15
|
show 1 more comment
Could you post some code, please?
– Henrik Andersson
Jun 25 '13 at 11:12
Are you using pagination?
– Ana Sampaio
Jun 25 '13 at 11:13
you have a try code please post your code
– Falguni Panchal
Jun 25 '13 at 11:13
2
"How it is happening ?" Who knows.... We don't have your code in front of us...
– Nick R
Jun 25 '13 at 11:13
3
No, you've attached your CSS, that isn't code. How are you adding the classes to the<tr>tags?
– Nick R
Jun 25 '13 at 11:15
Could you post some code, please?
– Henrik Andersson
Jun 25 '13 at 11:12
Could you post some code, please?
– Henrik Andersson
Jun 25 '13 at 11:12
Are you using pagination?
– Ana Sampaio
Jun 25 '13 at 11:13
Are you using pagination?
– Ana Sampaio
Jun 25 '13 at 11:13
you have a try code please post your code
– Falguni Panchal
Jun 25 '13 at 11:13
you have a try code please post your code
– Falguni Panchal
Jun 25 '13 at 11:13
2
2
"How it is happening ?" Who knows.... We don't have your code in front of us...
– Nick R
Jun 25 '13 at 11:13
"How it is happening ?" Who knows.... We don't have your code in front of us...
– Nick R
Jun 25 '13 at 11:13
3
3
No, you've attached your CSS, that isn't code. How are you adding the classes to the
<tr> tags?– Nick R
Jun 25 '13 at 11:15
No, you've attached your CSS, that isn't code. How are you adding the classes to the
<tr> tags?– Nick R
Jun 25 '13 at 11:15
|
show 1 more comment
3 Answers
3
active
oldest
votes
Why are you even using classes for this?
tr {background-color:white}
tr:nth-child(even) {background-color:black}
answered Jun 25 '13 at 11:13
Niet the Dark AbsolNiet the Dark Absol
257k53360468
This would be the best solution, it seems a bit of a waste to usemodulusjust to add the class to alternating rows.
– Nick R
Jun 25 '13 at 11:15
1
Maybe they want to support <IE8?
– anothershrubery
Jun 25 '13 at 11:15
Possibly, seems odd though that you would use a different solution (server side modulus) just to support 1 or 2 old browser versions.
– Nick R
Jun 25 '13 at 11:17
@anothershrubery If they can't be bothered to update their browsers, I can't be bothered to waste time coding specifically for them. Ni!
– Niet the Dark Absol
Jun 25 '13 at 11:20
add a comment |
try css
tr:nth-child(even) {
background-color: #000000;
}
javascript
$(document).ready(function()
{
$("tr:even").css("background-color", "#000000");
});
OR
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
answered Jun 25 '13 at 11:14
Falguni PanchalFalguni Panchal
7,49221928
add a comment |
If you have to support the older browsers (like IE8), nth-child doesnt work. A simple workarround would be a combination of Kolink's and falguni's solution:
tr {background-color:white}
tr:nth-child(even), tr.even {background-color:black}
$(document).ready(function(){
$("tr:even").addClass('even');
});
The solution falguni gave has a bad practice, it uses JS to update styles. If you decide it should not be black, but blue you would have to change two locations. My example does not need that.
My code can be improved, you could check if the user supports the :nth-selector, and IF NOT (add class) for performance.
answered Jun 25 '13 at 11:19
MartijnMartijn
12k32054
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f17295788%2falternate-row-color%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Why are you even using classes for this?
tr {background-color:white}
tr:nth-child(even) {background-color:black}
answered Jun 25 '13 at 11:13
Niet the Dark AbsolNiet the Dark Absol
257k53360468
This would be the best solution, it seems a bit of a waste to usemodulusjust to add the class to alternating rows.
– Nick R
Jun 25 '13 at 11:15
1
Maybe they want to support <IE8?
– anothershrubery
Jun 25 '13 at 11:15
Possibly, seems odd though that you would use a different solution (server side modulus) just to support 1 or 2 old browser versions.
– Nick R
Jun 25 '13 at 11:17
@anothershrubery If they can't be bothered to update their browsers, I can't be bothered to waste time coding specifically for them. Ni!
– Niet the Dark Absol
Jun 25 '13 at 11:20
add a comment |
Why are you even using classes for this?
tr {background-color:white}
tr:nth-child(even) {background-color:black}
answered Jun 25 '13 at 11:13
Niet the Dark AbsolNiet the Dark Absol
257k53360468
This would be the best solution, it seems a bit of a waste to usemodulusjust to add the class to alternating rows.
– Nick R
Jun 25 '13 at 11:15
1
Maybe they want to support <IE8?
– anothershrubery
Jun 25 '13 at 11:15
Possibly, seems odd though that you would use a different solution (server side modulus) just to support 1 or 2 old browser versions.
– Nick R
Jun 25 '13 at 11:17
@anothershrubery If they can't be bothered to update their browsers, I can't be bothered to waste time coding specifically for them. Ni!
– Niet the Dark Absol
Jun 25 '13 at 11:20
add a comment |
Why are you even using classes for this?
tr {background-color:white}
tr:nth-child(even) {background-color:black}
answered Jun 25 '13 at 11:13
Niet the Dark AbsolNiet the Dark Absol
257k53360468
Why are you even using classes for this?
tr {background-color:white}
tr:nth-child(even) {background-color:black}
answered Jun 25 '13 at 11:13
Niet the Dark AbsolNiet the Dark Absol
257k53360468
answered Jun 25 '13 at 11:13
Niet the Dark AbsolNiet the Dark Absol
257k53360468
answered Jun 25 '13 at 11:13
Niet the Dark AbsolNiet the Dark Absol
257k53360468
answered Jun 25 '13 at 11:13
Niet the Dark AbsolNiet the Dark Absol
257k53360468
257k53360468
This would be the best solution, it seems a bit of a waste to usemodulusjust to add the class to alternating rows.
– Nick R
Jun 25 '13 at 11:15
1
Maybe they want to support <IE8?
– anothershrubery
Jun 25 '13 at 11:15
Possibly, seems odd though that you would use a different solution (server side modulus) just to support 1 or 2 old browser versions.
– Nick R
Jun 25 '13 at 11:17
@anothershrubery If they can't be bothered to update their browsers, I can't be bothered to waste time coding specifically for them. Ni!
– Niet the Dark Absol
Jun 25 '13 at 11:20
add a comment |
This would be the best solution, it seems a bit of a waste to usemodulusjust to add the class to alternating rows.
– Nick R
Jun 25 '13 at 11:15
1
Maybe they want to support <IE8?
– anothershrubery
Jun 25 '13 at 11:15
Possibly, seems odd though that you would use a different solution (server side modulus) just to support 1 or 2 old browser versions.
– Nick R
Jun 25 '13 at 11:17
@anothershrubery If they can't be bothered to update their browsers, I can't be bothered to waste time coding specifically for them. Ni!
– Niet the Dark Absol
Jun 25 '13 at 11:20
This would be the best solution, it seems a bit of a waste to use
modulus just to add the class to alternating rows.– Nick R
Jun 25 '13 at 11:15
This would be the best solution, it seems a bit of a waste to use
modulus just to add the class to alternating rows.– Nick R
Jun 25 '13 at 11:15
1
1
Maybe they want to support <IE8?
– anothershrubery
Jun 25 '13 at 11:15
Maybe they want to support <IE8?
– anothershrubery
Jun 25 '13 at 11:15
Possibly, seems odd though that you would use a different solution (server side modulus) just to support 1 or 2 old browser versions.
– Nick R
Jun 25 '13 at 11:17
Possibly, seems odd though that you would use a different solution (server side modulus) just to support 1 or 2 old browser versions.
– Nick R
Jun 25 '13 at 11:17
@anothershrubery If they can't be bothered to update their browsers, I can't be bothered to waste time coding specifically for them. Ni!
– Niet the Dark Absol
Jun 25 '13 at 11:20
@anothershrubery If they can't be bothered to update their browsers, I can't be bothered to waste time coding specifically for them. Ni!
– Niet the Dark Absol
Jun 25 '13 at 11:20
add a comment |
try css
tr:nth-child(even) {
background-color: #000000;
}
javascript
$(document).ready(function()
{
$("tr:even").css("background-color", "#000000");
});
OR
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
answered Jun 25 '13 at 11:14
Falguni PanchalFalguni Panchal
7,49221928
add a comment |
try css
tr:nth-child(even) {
background-color: #000000;
}
javascript
$(document).ready(function()
{
$("tr:even").css("background-color", "#000000");
});
OR
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
answered Jun 25 '13 at 11:14
Falguni PanchalFalguni Panchal
7,49221928
add a comment |
try css
tr:nth-child(even) {
background-color: #000000;
}
javascript
$(document).ready(function()
{
$("tr:even").css("background-color", "#000000");
});
OR
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
answered Jun 25 '13 at 11:14
Falguni PanchalFalguni Panchal
7,49221928
try css
tr:nth-child(even) {
background-color: #000000;
}
javascript
$(document).ready(function()
{
$("tr:even").css("background-color", "#000000");
});
OR
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
answered Jun 25 '13 at 11:14
Falguni PanchalFalguni Panchal
7,49221928
answered Jun 25 '13 at 11:14
Falguni PanchalFalguni Panchal
7,49221928
answered Jun 25 '13 at 11:14
Falguni PanchalFalguni Panchal
7,49221928
answered Jun 25 '13 at 11:14
Falguni PanchalFalguni Panchal
7,49221928
7,49221928
add a comment |
add a comment |
If you have to support the older browsers (like IE8), nth-child doesnt work. A simple workarround would be a combination of Kolink's and falguni's solution:
tr {background-color:white}
tr:nth-child(even), tr.even {background-color:black}
$(document).ready(function(){
$("tr:even").addClass('even');
});
The solution falguni gave has a bad practice, it uses JS to update styles. If you decide it should not be black, but blue you would have to change two locations. My example does not need that.
My code can be improved, you could check if the user supports the :nth-selector, and IF NOT (add class) for performance.
answered Jun 25 '13 at 11:19
MartijnMartijn
12k32054
add a comment |
If you have to support the older browsers (like IE8), nth-child doesnt work. A simple workarround would be a combination of Kolink's and falguni's solution:
tr {background-color:white}
tr:nth-child(even), tr.even {background-color:black}
$(document).ready(function(){
$("tr:even").addClass('even');
});
The solution falguni gave has a bad practice, it uses JS to update styles. If you decide it should not be black, but blue you would have to change two locations. My example does not need that.
My code can be improved, you could check if the user supports the :nth-selector, and IF NOT (add class) for performance.
answered Jun 25 '13 at 11:19
MartijnMartijn
12k32054
add a comment |
If you have to support the older browsers (like IE8), nth-child doesnt work. A simple workarround would be a combination of Kolink's and falguni's solution:
tr {background-color:white}
tr:nth-child(even), tr.even {background-color:black}
$(document).ready(function(){
$("tr:even").addClass('even');
});
The solution falguni gave has a bad practice, it uses JS to update styles. If you decide it should not be black, but blue you would have to change two locations. My example does not need that.
My code can be improved, you could check if the user supports the :nth-selector, and IF NOT (add class) for performance.
answered Jun 25 '13 at 11:19
MartijnMartijn
12k32054
If you have to support the older browsers (like IE8), nth-child doesnt work. A simple workarround would be a combination of Kolink's and falguni's solution:
tr {background-color:white}
tr:nth-child(even), tr.even {background-color:black}
$(document).ready(function(){
$("tr:even").addClass('even');
});
The solution falguni gave has a bad practice, it uses JS to update styles. If you decide it should not be black, but blue you would have to change two locations. My example does not need that.
My code can be improved, you could check if the user supports the :nth-selector, and IF NOT (add class) for performance.
answered Jun 25 '13 at 11:19
MartijnMartijn
12k32054
answered Jun 25 '13 at 11:19
MartijnMartijn
12k32054
answered Jun 25 '13 at 11:19
MartijnMartijn
12k32054
answered Jun 25 '13 at 11:19
MartijnMartijn
12k32054
12k32054
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f17295788%2falternate-row-color%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Could you post some code, please?
– Henrik Andersson
Jun 25 '13 at 11:12
Are you using pagination?
– Ana Sampaio
Jun 25 '13 at 11:13
you have a try code please post your code
– Falguni Panchal
Jun 25 '13 at 11:13
2
"How it is happening ?" Who knows.... We don't have your code in front of us...
– Nick R
Jun 25 '13 at 11:13
3
No, you've attached your CSS, that isn't code. How are you adding the classes to the
<tr>tags?– Nick R
Jun 25 '13 at 11:15