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.
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;
}
How to write a css code in html code for creating a table like the following:
different colors for both alternative column and row
Many thanks
You can use the CSS-Selector nth-child.
This selector selects for example the second row.
table tr:nth-child(2){
background: red;
}
To have different coloured columns, you can use the following selector.
This will color the second column.
tr td:nth-child(2){
background: red;
}
Source: here
To select a specifig cell use both at one time:
table tr:nth-child(2) td:nth-child(2){
background: red;
}
More on this Website: https://www.w3schools.com/cssref/sel_nth-child.asp
You will have to implement so called even and odd rules, such as:
tr:nth-child(even)
tr:nth-child(odd)
the style will be implemented based on td and for red blue rows you can add class to (tr) or you can use nth child with number there on tr : tr:nth-child(6)
tr td:nth-child(even) {background:red;}
tr td:nth-child(odd) {background:pink;}
This question has been solved by setting the column in blue and light blue first then use the CSS-selector as the following:
table.tb1 tr:nth-child(10n+0),tr:nth-child(10n+1),tr:nth-child(10n+2),tr:nth-child(10n+3),tr:nth-child(10n+4){background: pink; }
table.tb1 tr:nth-child(10n+0) td:nth-child(2n+1){background: red;}
table.tb1 tr:nth-child(10n+1) td:nth-child(2n+1){background: red;}
table.tb1 tr:nth-child(10n+2) td:nth-child(2n+1){background: red;}
table.tb1 tr:nth-child(10n+3) td:nth-child(2n+1){background: red;}
table.tb1 tr:nth-child(10n+4) td:nth-child(2n+1){background: red;}
Thank you very much for helping me!
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 set up the following example: http://jsfiddle.net/SXEty/
<style>
table td, th { padding: 8px; text-align: left; }
table td:nth-child(1) { color: red; }
table td { color: blue }
</style>
...
<table>
<tr><th>Name</th><th>Age</th><th>City</th></tr>
<tr><td>Bob</td><td>27</td><td>Los Angeles</td></tr>
<tr><td>Charlie</td><td>34</td><td>San Diego</td></tr>
<tr><td>Daniel</td><td>41</td><td>San Francisco</td></tr>
</table>
I'm curious why the first column is colored as red instead of blue.
In my CSS, I set every first child to color "red". But then my next line of CSS sets every element to color "blue". Wouldn't the second line of CSS (color: blue) override the previous line (color: red)? Or is it that the nth-child property has precedence? If it does have precedence, is this true for all browsers?
Because td:nth-child(1) is more specific than just td.
There's a great overview of CSS specificity with a Star Wars theme that I suggest
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Because table td:nth-child(1) is a more specific selector, it will have precedence over table td even if the latter is declared later.
What's interesting is if you target a parent ID with table td, everything will turn blue - even if table td:nth-child(1) is declared later in the CSS sheet.
http://jsfiddle.net/mLrAf/2/