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.
Related
In very simple html/css, I have my menu in a <table id="menu">. The menu has no border, however I would like all the other tables in my blog to have borders.
I made it work this way:
#menu, #menu th, #menu td {border: none; color: red}
table, th, td {border: 1px solid black;}
However this is not very robust. If I add something else to tables I might forget to 'reset' it in #menu. Is there a way to force all properties in #menu so that I don't have to override one by one anything I would add to table, th, td {...}?
I tried the :not() selector but it doesn't feel robust either, I would rather specify what I want for menu on the #menu {...} line, not elsewhere. Let me know if that makes sense or I can reformulate
I think that I understand now. I was searching for a way to unset all values for a css class and came across this page: Reset/remove CSS styles for element only
It tells us that we can do something like this to achieve what you want:
#menu, #menu th, #menu td {
all: unset;
color: red;
}
table, th, td {
border: 1px solid black;
}
Notice how I added the all: unset; and removed the border: none;
This should reset all the styles for elements with that id, but make sure to put your other styles AFTER the all: unset, or else it will unset the styles you just wrote. Hope this helps!
Maybe using classes instead of id's.
If you use a class you can apply a css rule to all elements that have It
So for example to your table you can use
.custum-table
The prevoius class Will apply css styles to all elements
And finally if you wanna apply another css rule you can add another class to your element in this way
Another html file
.custom-table__no--effect
Previous class with BEM Will apply css styles to only one element for example table element
I am trying to target the "Holders" value on this page (364578 addresses at time of writing this).
I have tried a few different css targets with no success:
.table tr:nth-child(3) td:nth-child(2)
as well as
#ContentPlaceHolder1_tr_valuepertoken.next('tr td:nth-child(2))
Here is a picture of the html structure
How can I target the "Holders" value on this page?
Sorry I did not noticed the css tag for this question.
Use this for css:
tr:nth-of-type(3) td:nth-of-type(2) { background: red; }
To target that using css, you can add an id to that element.
This would look like:
<td id="id">Holders:
</td>
that way you can modify it using css.
#id {
/*Your css*/
}
hope this helps!
Note: the /*Your css*/ is just a comment. Remove it before you add your actual css.
You can use this way like a matrix:
tr:nth-of-type(3) td:nth-of-type(2) { background: red; }
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");
});
I've been using the following jquery code to style table rows.
$('tr').hover(function() {
$('tr td').css('color', '#ffffff');
$('tr td a').css('background', '#0080ff');
});
$('tr').mouseleave(function() {
$('tr td').css('color', '#222222');
$('tr td a').css('background', '#ffffff');
});
This works just fine but I'm wondering there's a CSS alternative. It would seem like a much more efficient approach than what I have right now but I really don't know a whole lot about CSS.
The problem with using the following CSS
tr:hover {
color:#ffffff;
}
is that the anchor tags still remain the same color when the table row is hovered on. Are there any ways via CSS that hovering on a table row could trigger the anchor tags nested inside of the given table row to change colors?
It sort of depends on your other CSS selectors, but this will probably work:
tr:hover td {
color: white;
}
tr:hover td a {
background: #0080ff;
}
td:hover a {
your link style on row hover
}
I'm not very good with CSS and I need some help.
I have a table where i want every other row to be gray and the alternating rows to be white. but i only want it to happen on one particular table.
I added some code to my CSS:
tr:nth-child(even) {
background: #CCC;
}
tr:nth-child(odd) {
background: #FFF;
}
but the problem is that its affecting every table on my site.
I haven't found any examples where it applies only to a certain class. Is that possible? I want it to apply only to:
table.dashboardtable
Use the CSS descendant combinator (juxtaposition) as usual:
table.dashboardtable tr:nth-child(even)
table.dashboardtable tr:nth-child(odd)
nth-child and nth-of-type accept odd and even as well as a formula like an+b, where a and b are constants.
Usually you want to use nth-of-type, which will only apply to the type you specify. That will leave out other elements. If you want every even tr to have that background color, then try:
tr:nth-of-type(2n){
background: #CCC;
}
tr:nth-of-type(2n+1){
background: #FFF;
}
More info on CSS Selectors
Hope this makes sense of it.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#customers tr:nth-child(even){
background-color:white;
}
#customers tr:nth-child(odd){
background-color:Lavender;
}
</style>
</head>
<body>
<p>In your markup define your table:</p>
<table id="customers"></table>
</body>
</html>