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
Related
We have a generic css style defined like this:
.table-container table tr:hover td {
background-color: #eaeaea;
}
This is used for all tables across application. However, I have to override it for a particular table on specific rows. I am attaching new css style at each <tr class=‘edited’> with this definition:
.edited {
background-color: #f8cbad;
}
But, when hovering over the row, it is using generic hover style, and I am not able to override it.
Can you please suggest how to override it so that I see same background color as edited style even on hovering the row?
I tried with following and tweaking, but didn’t work.
.table-container table tr:hover .edited td {
background-color: #eaeaea;
}
Ok, I have figured out after some trial. Answering to help others:
Defining hover for the specific style class did the trick:
.edited {
background-color: #f8cbad;
}
.edited:hover {
background-color: #f8cbad !important;
}
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.
Not sure how to go about this piece of code (CSS):
td {
border-bottom: solid 2px lightgray;
}
(featured in the jsfiddle below), to not function but only for the first button click. The reason behind this is because then there would be 2 bottom borders.
http://jsfiddle.net/julianbuscema/yqh2rqh0/38/
Pretty much on the second button click I want the code to be activated
In addition to the style you already have in your question, add :last-child to tr and then style the last td based on that.
tr:last-child td {
border: none!important;
}
Here's a fiddle: http://jsfiddle.net/8a0m19z7/
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 that highlights all the odd rows.
To do this, I just check what the row number is and apply the alt class to said row.
I then highlight the row on hover using a simple :hover in the CSS file.
It highlights the non-.alt rows perfectly, but not the alt rows.
Here is my CSS code:
.datagrid tr:hover, .datagrid tr.alt:hover {
background-color:#497A43;
color:#D3F0D4;
}
What am I doing wrong?
dont apply those cumbersome class changing methods. Instead use the css selector
.datagrid tr:nth-child(even):hover {background: #CCC}
.datagrid tr:nth-child(odd):hover {background: #FFF}
js fiddle
It works without needing the .alt selector.
See http://jsbin.com/ixokoj/2/edit
instead of
.datagrid tr:hover, .datagrid tr.alt:hover
{
background-color:#497A43;
color:#D3F0D4;
}
use the following
.datagrid tr.alt:hover
{
background-color:#497A43;
color:#D3F0D4;
}
The above will apply the background color and color to the rows which has class as "alt" and only when they are hovered.
Hope this helped.