On .GMDataRow td:hover I want to change background-color for each td in that tr element. Is this possible only with CSS? I'm trying to do it with CSS only, I don't need JQuery, JS solutions.
<tr class="GMDataRow">
<td></td>
<td</td>
...
</tr>
try this way
tr.GMDataRow:hover td{background:#ccc;}
Solution suggested by Lalji is perfect.
tr.GMDataRow:hover td{
background-color:red;
}
tr.GMDataRow finds the class "GMDataRow" in table rows.
tr.GMDataRow:hover will activate hover css for current targeted row.
tr.GMDataRow:hover td will target all column which are child of active row.
If you want to change td background on hover differently ... try this
HTML
<table style="width:100%">
<tr class="GMDataRow">
<td>ceva</td>
<td>ceva</td>
<td>ceva</td>
<td>ceva</td>
</tr>
</table>
CSS
.GMDataRow td:first-child:hover {
background: yellow;
}
.GMDataRow td:nth-child(2):hover {
background: pink;
}
.GMDataRow td:nth-child(3):hover {
background: red;
}
.GMDataRow td:last-child:hover {
background: blue;
}
also take a look here http://www.w3schools.com/css/css_pseudo_classes.asp , or here http://www.w3schools.com/cssref/sel_firstchild.asp maybe it will help you to understand better.
Related
I have defined the following inside my css:-
.mainTr {
background-color:#78a22f;
color:white;
}
.mainTr :hover{
background-color: #C1D72E;
color:#78a22f;
}
and i have the following TR:-
<tr class="mainTr">
<td><b>SPECIFICATIONS</b></td>
<td><b>FEATURES</b></td>
</tr>
but currently when i hover over a TR only on TD will got the new hover effect and for its text color while the background color will not be #C1D72E, also the other TD will keep rendering the defualt behavioure ..
I think u did not use table tag when u using tr and td tag example below:
html:
<table>
<tr class="mainTr">
<td><b>SPECIFICATIONS</b></td>
<td><b>FEATURES</b></td>
</tr>
</table>
CSS:
.mainTr{
background:#78a22f;
color:white;
padding:10px;
}
.mainTr:hover{
background-color:#C1D72E;
color:#78a22f;
}
jsfiddle https://jsfiddle.net/Grald/qd6c2zww/
I have a bootstrap table which contains various data. I want the last cell of a row to be colored in a special color if a certain argument equals a string.
So the code I use now looks like this:
<tr ng-repeat="data in responseData">
<td>{{data.title}}</td>
<td>{{data.description}}</td>
...
<td class="status" ng-class="{ 'available': data.status=='string1', 'taken': data.status!='string1'}"></td>
</tr>
And the css file:
.status{
padding:1px !important;
width:10px;
}
.status_available{
background-color: green;
}
.status_taken{
background-color:red;
width:10px;
height:100%;
}
But the td isn't colored in the initialized values. I use Chrome, and the developer tools show that the right class is on the td, but as mentioned the color is the standard one.
Can anyone please help me?
According to your css it should be:
<td class="status" ng-class="{ 'status_available': data.status=='string1', 'status_taken': data.status!='string1'}"></td>
or change you css to:
.status.available{
background-color: green;
}
.status.taken{
background-color:red;
width:10px;
height:100%;
}
Bad thing but - you can force it just by applying " !important" to your css rules like
background-color: red !important;
Probably some bootstrap styles are applied after you styles.
I have this table:
<table>
<tr>
<td class="order-delivered"><i>order</i><br/><i>delivered</i><br/>
<a class="check-mark">✔</a>
</td>
<td class="prep-pizza"><i>prep</i><br/><i>pizza</i><br/>
<a class="check-mark">✔</a>
</td>
<td class="bake-pizza"><i>bake</i><br/><i>pizza</i><br/>
<a class="check-mark">✔</a>
</td>
<td class="out-for-deliver"><i>out for</i><br/><i>delivery</i><br/>
<a class="check-mark">✔</a>
</td>
</tr>
</table>
What I want is that when I hover in class prep-pizza, it will change the text color of a in prep-pizza and order-delivered.
And when I hovered on bake-pizza it will change the text color of a in prep-pizza and order-delivered and bake-pizza
and lastly when I hovered in out-for-deliver it will change the text color of a of all the td.
And by the way the check mark is only colored not the other characters.
How can I implement this kind of hovering where it will target multiple a from different class.
EDIT:
it will change color depending of the current location of which they currently hovering.
When I only hover order-delivered it will only change to the of the order-delivered.
Hope I understand what you want,
this should do the trick
tr:hover .check-mark,
td:hover .check-mark {
color: blue;
}
td:hover ~ td .check-mark {
color: black;
}
try it here http://jsfiddle.net/1n75v7y1/
Try this CSS, it can only change the current hover element... if you need to change another sibilings then you need to use javascript or jquery
.order-delivered:hover{
background-color: red;
}
.prep-pizza:hover{
background-color: red;
}
.bake-pizza:hover{
background-color: red;
}
.out-for-deliver:hover{
background-color: red;
}
All,
I have an ASP.NET GridView that is rendered to an HTML table.
<table>
<tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
<tr><td>Data 3</td><td>Data 4</td></tr>
</table>
I want to highlight the row when the mouse is hovered over it - except for the first row which is the header.
I am just getting my head wet with JQuery, and have dabbled a bit with CSS (either CSS2 or CSS3). Is there a preferred way to do this?
Can anyone give me a starting point for this?
Cheers
Andez
There is a way to achieve the desired behavior without class-ing each row separately. Here's how to highlight each table row except for first one (header) on hover using the CSS :not and :first-child selectors:
tr:not(:first-child):hover {
background-color: red;
}
Unfortunately, IE < 9 does not support :not, so to do this in a cross-browser way, you can use something like this:
tr:hover {
background-color: red;
}
tr:first-child:hover {
background-color: white;
}
Basically, the first CSS rule includes all rows. To avoid highlighting the first row, you override the its hover style by selecting with tr:first-child and then keeping its background-color to white (or whatever the non-highlighted row's color is).
I hope that helped, too!
To expand on user2458978's answer surely the best way of doing this is to code up the tables correctly.
<table>
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
Then the CSS is simply
table tbody tr:hover { background-color: red; }
Here's a jsFiddle example
You can do this using the CSS :hover specifier. Here's a demonstration:
<table>
<tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
<tr class = "notfirst"><td>Data 1</td><td>Data 2</td></tr>
<tr class = "notfirst"><td>Data 3</td><td>Data 4</td></tr>
</table>
CSS:
.notfirst:hover {
background-color: red;
}
1. Place header tr inside thead tag
2. Place other tr inside tbody tag
3. Use following css
table tr:not(thead):hover {
background-color: #B0E2FF;
}
Use TH tag for first row and do that:
th {
background-color:#fff;
}
For all others rows:
tr:not(:first-child):hover {
background-color:#eee;
}
or
tr:hover td {
background-color:#eee;
}
Use jQuery to add a class to the parent element of the td (wont select th)
$('td').hover(function(){
$(this).parent().addClass('highlight');
}, function() {
$(this).parent().removeClass('highlight');
});
Then add the CSS class
.highlight {
background:red;
}
Why not simply use
tr>td:hover {
/* hover effect */
background-color: lightblue;
}
This will only affect table rows with td's inside, not table rows with th's inside.
Works in all browsers. Cheers, guys.
Why not something like:
tr:first-child ~ tr { background-color:#fff; }
As of my requirement, I have to highlight all the even rows except header row.
Hence, this answer might not be suitable to the above question.
Even then, I am giving my answer here with the hope that somebody else can use my answer if they encounter this page in search engine search.
My answer is:
$("#tableName tr:even").not("tr:nth(0)").addClass("highlight");
If your table is standard, you have a table like this:
<table>
<thead>
<tr>
<th>title</th>
</tr>
</thead>
<tbody>
<tr>
<th>cell</th>
</tr>
</tbody>
</table>
so you can use this css code:
table > *:not(thead) tr:hover{
background-color: #f5f5f5;
}
I am using a table with alternate row color with this.
tr.d0 td {
background-color: #CC9999;
color: black;
}
tr.d1 td {
background-color: #9999CC;
color: black;
}
<table>
<tr class="d0">
<td>One</td>
<td>one</td>
</tr>
<tr class="d1">
<td>Two</td>
<td>two</td>
</tr>
</table>
Here I am using class for tr, but I want to use only for table. When I use class for table than this apply on tr alternative.
Can I write my HTML like this using CSS?
<table class="alternate_color">
<tr><td>One</td><td>one</td></tr>
<tr><td>Two</td><td>two</td></tr>
</table>
How can I make the rows have "zebra stripes" using CSS?
$(document).ready(function()
{
$("tr:odd").css({
"background-color":"#000",
"color":"#fff"});
});
tbody td{
padding: 30px;
}
tbody tr:nth-child(odd){
background-color: #4C8BF5;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>
There is a CSS selector, really a pseudo-selector, called nth-child. In pure CSS you can do the following:
tr:nth-child(even)
background-color: #000000;
}
Note: No support in IE 8.
Or, if you have jQuery:
$(document).ready(function()
{
$("tr:even").css("background-color", "#000000");
});
You have the :nth-child() pseudo-class:
table tr:nth-child(odd) td{
...
}
table tr:nth-child(even) td{
...
}
In the early days of :nth-child() its browser support was kind of poor. That's why setting class="odd" became such a common technique. In late 2013 I'm glad to say that IE6 and IE7 are finally dead (or sick enough to stop caring) but IE8 is still around — thankfully, it's the only exception.
Just add the following to your html code (withing the <head>) and you are done.
HTML:
<style>
tr:nth-of-type(odd) {
background-color:#ccc;
}
</style>
Easier and faster than jQuery examples.
can i write my html like this with use
css ?
Yes you can but then you will have to use the :nth-child() pseudo selector (which has limited support though):
table.alternate_color tr:nth-child(odd) td{
/* styles here */
}
table.alternate_color tr:nth-child(even) td{
/* styles here */
}
We can use odd and even CSS rules and jQuery method for alternate row colors
Using CSS
table tr:nth-child(odd) td{
background:#ccc;
}
table tr:nth-child(even) td{
background:#fff;
}
Using jQuery
$(document).ready(function()
{
$("table tr:odd").css("background", "#ccc");
$("table tr:even").css("background", "#fff");
});
table tr:nth-child(odd) td{
background:#ccc;
}
table tr:nth-child(even) td{
background:#fff;
}
<table>
<tr>
<td>One</td>
<td>one</td>
</tr>
<tr>
<td>Two</td>
<td>two</td>
</tr>
</table>
Most of the above codes won't work with IE version. The solution that works for IE+ other browsers is this.
<style type="text/css">
tr:nth-child(2n) {
background-color: #FFEBCD;
}
</style>
<script type="text/javascript">
$(function(){
$("table.alternate_color tr:even").addClass("d0");
$("table.alternate_color tr:odd").addClass("d1");
});
</script>
You can use nth-child(odd/even) selectors however not all browsers (ie 6-8, ff v3.0) support these rules hence why most solutions fall back to some form of javascript/jquery solution to add the classes to the rows for these non compliant browsers to get the tiger stripe effect.
There is a fairly easy way to do this in PHP, if I understand your query, I assume that you code in PHP and you are using CSS and javascript to enhance the output.
The dynamic output from the database will carry a for loop to iterate through results which are then loaded into the table. Just add a function call to the like this:
echo "<tr style=".getbgc($i).">"; //this calls the function based on the iteration of the for loop.
then add the function to the page or library file:
function getbgc($trcount)
{
$blue="\"background-color: #EEFAF6;\"";
$green="\"background-color: #D4F7EB;\"";
$odd=$trcount%2;
if($odd==1){return $blue;}
else{return $green;}
}
Now this will alternate dynamically between colors at each newly generated table row.
It's a lot easier than messing about with CSS that doesn't work on all browsers.
Hope this helps.
Please try this way: it can use in Html file for WebView
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: Lightgreen;
}
</style>
</head>
Alternating rows selector
Here is how it works and how you can for example use the modulo to alternate between rows of several different colors (here 3):
ol>li:nth-child(3n+1) {
background-color: blue;
}
ol>li:nth-child(3n+2) {
background-color: green;
}
/* The following selector is equivalent to "nth-child(3n)" */
ol>li:nth-child(3n+3) {
background-color: red;
}
<ol>
<li />
<li />
<li />
<li />
<li />
<li />
<li />
<li />
<li />
</ol>
As it as already been stated, rows indexes used in the selector starts from 1 (and not 0). That's why the selector of the 1st, 4th, 7th rows is nth-child(3n+1).
How the selector reads
The selector nth-child(Mn+k) for a row of index i reads as if (i % M == k). For example, if we want to select all rows whose base 3 modulo is equal to 2 we would write in CSS nth-child(3n+2), in other (javascript) words, the selector does this:
const M = 3;
const k = 2;
for (let i = 1; i < 10; i+=1){
// The `nth-child(Mn+k)` selector:
if (i % M == k){
console.log(`${i} selected`);
}
}
Outputs
2 selected
5 selected
8 selected