This simple style works to provide alternating background-color[s] in my tables in Firefox and Chrome, but fails in IE 11 (and, I presume, earlier versions). In the latter, no color is there and my background-image shows through.
.recordtable tr:nth-child(even) {background-color: #eee;}
.recordtable tr:nth-child(odd) {background-color: #ddd;}
Can I get this to work in IE? Thank you.
I've had issues with IE in the past when trying to style a tr element. Try styling the child td elements instead, like so:
.recordtable tr:nth-child(even) td {background-color: #eee;}
.recordtable tr:nth-child(odd) td {background-color: #ddd;}
You can achieve it by using CSS and jQuery
CSS:
.recordtable tr.even{background-color: #eee;}
.recordtable tr.odd{background-color: #ddd;}
jQuery:
$(document).ready(function() {
$(".recordtable tr:nth-child(even)").addClass("even");
$(".recordtable tr:nth-child(odd)").addClass("odd");
});
Related
I have a table that is generated and filled with data in the code behind. I give it the CSS class test with the cssClass attribute. Now I want to give the odd and even rows different colors. But when I try to use the normal CSS code for it, it does not work.
This is my CSS code:
<style>
.test
{
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
}
</style>
and this is the code behind code where I add the cssClass
tableData.CssClass = "test";
You're trying to nest CSS rules which is only possible in less/sass etc.
Try this:
.test tr:nth-child(even) {
background: #ccc;
}
.test tr:nth-child(odd) {
background: #fff;
}
The :nth-child() selector is supported in all major browsers, except IE8 and earlier.
i trying to change background color on mouse over.
i have this css code
table.subform{width: 550px}
table.subform tr td{padding: 3px}
table.subform tr td:first-child{text-align: right}
table.subform2{width: 100%}
table.subform2 tr td{padding: 5px;}
table.subform2 tr td:first-child{text-align: right;background-color: #E3E3E3;font-weight: bold;width: 50%;border-bottom: 1px solid #c6c6c6;padding-right: 10px}
table.subform2 tr td:last-child{text-align: left;background-color: #f1f1f1;vertical-align: top}
table.subform2 tr:hover{color: #082;background-color: #FFF}
as you can see in last line table.subform2 tr:hover when someone mouse hover TR then full TR's background color have to be change
The background doesn't change, because you have defined background-color in table.subform2 tr td:first-child and ...:last-child. When you define no background-color or define a background-color on ... tr only, the background-color changes.
See JSFiddle, the middle column.
Change the last line to
table.subform2 tr:hover td{color: #082;background-color: #FFF}
this selects the td element and changes the background-color accordingly.
Modified JSFiddle
Your are define background-color to it's TD that's why it's not visible. Write like this:
table.subform2 tr:hover td{color: #082;background-color: #FFF}
Check this http://jsfiddle.net/ZrYUJ/2/
Write your HTML because if something is wrong in it it is possible reason tr:hover to not working. And make sure the browser is not old because tr:hover is not supported everywhere.
You should write
table.subform2 tr:hover td{color: #082;background-color: #FFF}
instead. Because you have set the background color of the child td's.
Also tr:hover does not work in some older browsers. You can use javascript for fixing this.
http://jsfiddle.net/DK5x4/
I use even & odd CSS rule for a table but that's also the changing <thead>.
thead {background-color: #999;}
tr:nth-child(even) {background: #fff}
tr:nth-child(odd) {background: #C8C8C8}
The result is that my <thead> is #C8C8C8 and not #999.
So my question is, is that possible to use even & odd without that's affect the <thead>?
You can add tbody to you selector so that the rule only applies to tr:s within your tbody:
tbody tr:nth-child(even) {background: #fff}
tbody tr:nth-child(odd) {background: #C8C8C8}
Sure, use tbody selector:
thead{background-color: #999;}
tbody tr:nth-child(even) {background: #fff}
tbody tr:nth-child(odd) {background: #C8C8C8}
Because you are using <tbody> elements on your <table>, right? If don't, you should use it :)
The Blueprint CSS framework makes all table rows of alternating colors by default. How to disable this behaviour for one table?
I tried to use Chrome Developer Tools to see all the styles Chrome uses for a defined table, but did not find the style which would set the colors for rows. I also searched the Internet and did not find a solution. It's like magic...
Anyone can help me out?
You need a more specific selector to override... BP is pretty general though so that shouldnt be an issue for example:
table.no-zebra tbody tr:nth-child(even) td,
table.no-zebra tbody tr.even td {
background: transparent;
}
you can replace transparent with whatever color to make all rows a solid color.
I would just do override in my own css file
tbody tr:nth-child(even) td, tbody tr.even td {background:none;}
This is what I put into the top of my CSS file to disable Blueprint's even table rows background color.
table tr:nth-child(even) td {
background: transparent;
}
Possibly search for and remove (From screen.css)
tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}
The CSS:
tr.row1 { background-color: #FFFFFF; }
tr.row2 { background-color: #E0E0FF; }
I am using pagination and the results show fine in IE but disappear in Chrome and Firefox when advancing forward from page 1.
Doesn't answer your question, but if the alternating row colour isn't crucial, you can do this with CSS3 nth-child selector, which works with newer versions of all browsers:
tr:nth-child(even) {background: #FFFFFF}
tr:nth-child(odd) {background: #E0E0FF}