I need to overwrite some CSS in a Drupal back office (I can't change the CSS) and I tried to follow the instructions of this stackoverflow question.
So I made the following code :
EDIT
<style type="text/css">.maclasse div {
background: #ffffff;
overflow:auto;
width:auto;
}
.maclasse2 tbody tr td {
text-align: left;
}
</style>
And then, in the HTML I used my side classes :
<div class="maclasse maclasse2">
<table class="maclasse2">
<tbody>
<tr>
<td>
<pre style="margin: 0; line-height: 125%">
....
But it is not working ; the inspection of the page shows that :
In td, the text-align is still centered and we can see the override is denied. What do I need to add to my code ?
if just text in html like this code
<td class= "montd">
...
<span>text</span>
...
</td>
in css selected like this
.montd span {
text-align: left;
}
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.
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;
}
I am trying to give a bottom padding to every cell in a table. Since i am using multiple tables in my code, i am using a class by the name summary.
The HTML code is :
<table class="summary">
<tr>
<td >...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
The smarty code is :
<style>
chargesSummary td {
padding-bottom:12px;
}
</style>
I have also tried
<style>
td.chargesSummary {
padding-bottom:12px;
}
</style>
Only code that adds bottom padding is:
<style>
td {
padding-bottom:12px;
}
</style>
but it adds to every table cell. I just want to add that for a specific table'e cells.
Use table.summary td to select only td tags that are descendants of tables with the class summary.
CSS
table.summary td {
padding-bottom: 12px;
}
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;
}