I'd like to use the tr:nth-child(even/odd) pseudo class for a table, but I want to support the IE 2 population as well. So, is there any purely css way to add a border to tr if nth-child isn't supported?
You can try Selectivizr, I think that's the easiest solution.
EDIT:
You could also use jquery to add classes for you:
$(function() {
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
});
EDIT2:
Also, if you're using Modernizr, you could try this.
EDIT3 :)
tr { border-bottom: 1px solid #ccc; }
tr:nth-child(odd),
tr:nth-child(even) { border: none; }
tr:nth-child(odd) { background: #eee; }
tr:nth-child(even) { background: #ddd; }
You could add + between your classes/elements to do like in this example below, every 5 <tr> remove the margin-right
tr{margin-right:10px;}
tr + tr + tr + tr + tr{margin-right:0;}
A great replacement for NTH pseudo-classes without any javascript and IE7+ compatible ;)
Related
I am trying to remove the background color of a tr element on a table with Material Design Lite.
I'm using Sass.
This is the code causing the effect:
.mdl-data-table tbody tr:hover {
background-color: #FFFFFF !important;
}
This is the code I'm using with no positive results:
.mdl-data-table tbody tr:hover{
tr:hover .no-hover{
background-color: #FFFFFF !important;
}
}
What am I missing to achieve the behavior I require?
You're targetting:
tr:hover .no-hover {
background-color: #FFFFFF !important;
}
That's looking for a table row with a child with the class no-hover (presumably the table cell). The background colour is actually being applied to the row itself.
I believe what you're looking for instead is:
tr.no-hover:hover {
background-color: #FFFFFF !important;
}
Which targets a row with the class no-hover.
Hope this helps!
I had the same problem and solved a little bit different with same result:
.no-hover tbody tr:hover {
background-color: #FFFFFF !important;
}
and put the class 'no-hover' in the table tag.
got styled css table but for some reason the row styling is being cut off, css inspector is showing any obvious error. attached is the css and table
example of issue
see codepen
Using background on td Instead of tr will solve your problem.
table.striped tr:nth-child(even) td {
background-color: #fff;
}
table.striped tr:nth-child(odd) td{
background-color: #efefef;
}
Updated Codepen
Look at this fiddle: http://jsfiddle.net/czz2ejfw/1
Style for my table:
td {
color: #669;
}
tbody tr:hover {
color: red;
}
The text color should be red when we hover. In fact, if you look at developer tools you see that red should be applied. But incredibly, it displays as #669. WTH?
This is consistent across Firefox, Chrome, Safari, and Opera.
It isn't more specific. It matches a different element.
td { color: #669; } overrides the default stylesheet (which is probably something like td { color: inherit; }) because author stylesheets override browser stylesheets.
If you want to match the td when the tr is hovered, then you need to mention the td in the selector (e.g. with a descendant combinator).
tbody tr:hover td {}
<tr> is getting the color:red; but there is nothing there to be styled red.
Instead you would need to do this, which applies red to all <td> cells that are children of the parent <tr>:
tbody tr:hover {
background-color: yellow;
}
tbody tr:hover td {
color: red;
}
JS Fiddle Demo
As actually already said in a comment, the td is a child of the tr, so although the background of the tr changes, if you can't see it anywhere because none of the td's are transparent you won't get anywhere. The correct solution thus is to either make the td's transparent (default) and instead style the tr's always, or use tr:hover td{} to override the styles of the td instead of styling the tr.
Update that part of your CSS to this and it will work:
tbody tr:hover {
background-color: yellow;
}
tbody tr:hover td{
color: red;
}
Red is higher priority in your version because it is specific for td the tbody tr is not that specific
I have a table with a bunch of items, say 20. Every other row has a specific background color and the items in the cell do as well.
I achieve this with the following piece of CSS:
#item_list tr:nth-child(even),
#item_list tr:nth-child(even) input[type="text"],
#item_list tr:nth-child(even) input[type="number"] {
background-color: #d4d4d4;
}
My question is whether there is a neater way to end up with the same styling? Specifically without the repetition of
#item_list tr:nth-child(even)
or not?
Not using CSS.
If you use a pre-processor such as SASS or LESS then you could get syntax like:
#item_list tr:nth-child(even) {
background-color: #d4d4d4;
input[type="text"],
input[type="number"] {
background-color: #d4d4d4;
}
}
I have the following situation :
.table_green {
background: #B4E391;
}
.data_table tbody tr:hover {
background-color: #fff;
cursor: pointer;
}
.unclickable_table tbody tr:hover {
background-color: inherit;
cursor: default;
}
Now the tr originaly is green color, and i want when a table has class='data_table unclickable_table' set, that on hover on a tr that has table_green class, the background-color property won't change and stay green, but inherit doesn't seem to work
Example html :
<table class='data_table unclickable_table'>
<tbody>
<tr class='table_green'>
<td>Untill it goes Click!</td>
</tr>
</tbody></table>
Or this fiddle : http://jsfiddle.net/nyDNc/1/
Any help?
This is a solution, hopefully one that will work within your structure cause it depends on how you're styling your table elements.
inherit won't work because it is inheriting from the table which has a background of none. Instead you can have the tr set and change the colour of the td on hover, so that it has a context to inherit from.
See the working example here on JSFiddle.
The CSS is:
.table_green {
background: #B4E391;
}
.data_table tbody tr:hover td {
background-color: #fff;
cursor: pointer;
}
.unclickable_table.data_table tbody tr:hover td {
background-color: inherit;
cursor: default;
}
Why do you add a second class in order to override the effect the first class has. Why don't you just remove the 'data_table' classes on the rows you don't want the effect on.
i'm not sure i understand You very well, but
DEMO IS HERE:
http://jsfiddle.net/nyDNc/1/