even/odd styles set on tablerows but hovering of table rows don't work .
Try it on : http://jsfiddle.net/w7brN/
CSS style :
#table_even tr:hover { background-color:#fffbae!important; } /* hovering */
#table_even tr:nth-child(odd) td { background-color:#fbfbfb } /*odd*/
#table_even tr:nth-child(even) td { background-color:#e8ecee } /* even*/
HTML Codes:
<table id="table_even" style="width: 100%">
<tr>
<td>##</td>
<td>##</td>
</tr>
<tr>
<td>##</td>
<td>##</td>
</tr>
<tr>
<td>##</td>
<td>##</td>
</tr>
</table>
how can be solve ?
You need to re-order the CSS and add the <td> like so this:
#table_even tr:nth-child(odd) td {
background-color: #fbfbfb
} /*odd*/
#table_even tr:nth-child(even) td {
background-color: #e8ecee
} /* even*/
#table_even tr:hover td {
background-color: #fffbae;
} /* hovering */
Otherwise the nth-child rules will always have precedence over the hover, aswell as you added the background-color to the <tr>, not the <td>s before.
In IE there must be declared a <!DOCTYPE> for the :hoverselector to work on other elements than the <a> element.
See http://www.w3schools.com/cssref/sel_hover.asp
Can't we have
$(this:even).css & $(this:odd).css
will make life easier?
You can do it by setting up CSS for even & odd table rows
tr {background:#663366;}
tr:hover {background:#FF6633;}
tr.odd {background:#CCCCCC;}
$(document).ready(function () {$("tr:odd").addClass("odd");}):
see the example here http://jsfiddle.net/Cpp3p/
Its not working completely in jsfiddle but working in most of browser
cheers!!!
#table_even tr:hover { background-color:#fffbae!important; } /* hovering */
You are just missing the td. Try:
#table_even tr:hover td{ background-color:#fffbae!important; } /* hovering */
Related
I am making a table on a webpage inside Zetaboards forum software. When I am trying to create alternating background color for each row, the forum's default CSS intervenes.
My HTML:
<table class="stats">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
My CSS:
table.stats tbody tr:nth-child(even) {
background-color: #333;
}
table.stats tbody tr {
background-color: #232;
}
The above works just as I want it to in cssdeck.com. However, when I move it on my forum webpage, the forums "td" css takes over.
Forum CSS:
td {
background-image: ...;
background-color: ...;
background-position: ...;
...
}
How do I override the forum's default CSS?
I have tried adding !important, but it didn't work. I also tried to add a class for each "tr" and add tr.class in my css. That also didn't work.
I do have control over my forum's theme CSS. But I can't change it, since that "td" style is widely used across the forum design. I don't want to add a class to each td in my HTML either...
I appreciate any help I can get, thank you for your time!
Table cells are contained within table rows. When you apply background color to both rows and cells (as is the case with the above example) the cell background color will cover the rows' background color.
Workaround: add this rule to undo the forum's styles applied on table cells:
table.stats td {
background: transparent none;
}
And apply background color on rows (i.e. no change in your original example):
table.stats tbody tr:nth-child(even) {
background-color: #333;
}
table.stats tbody tr {
background-color: #232;
}
1.)you have to add td after tr in your css
Try this:
<style>
table.stats tbody tr td:nth-child(even) {
background-color: #333 !important ;
}
table.stats tbody tr td{
background-color: #232 !important ;
}
</style>
I have a CSS provided which contains following code
table.exm_table tbody tr.odd td{
background-color:#ffffff;
}
I'm not sure what should it style. Will be background color set at the td element in following structure?
<table class="exm_table">
<tbody>
<tr class="odd">
<td>Is this an selected element?</td>
</tr>
</tbody>
</table>
EDIT:
Actually I've overlooked second part of the CSS:
table.exm_table tbody tr:nth-child(odd) td,
table.exm_table tbody tr.odd td
Which caused my confusion why code haven't been working...
Your HTML is was incorrect but otherwise the CSS will work and targets the td. Note that in your (original) example there is no table-row <tr>. You'll see it works with the corrected mark-up:
<table class="exm_table">
<tbody>
<tr class="odd">
<td>Is this an selected element?</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/8zan1jyf/
As you can see, your CSS selector does address the td - or more specifically:
any td within a tr (that has the classname 'odd') within a tbody within a table (that has the classname 'exm_table')
There's probably no need to be quite that specific ;)
UPDATE
Since you've edited your question here's some further info about the alternating row style that seems to be confusing you.
table.exm_table tbody tr:nth-child(odd) td uses the nth-child selector to get tds in alternate rows.
table.exm_table tbody tr.odd td simply selects all tds within trs that have the classname 'odd'. (It's this classname that may be confusing because it has nothing to do with odd/even in itself and could just as easily be called 'bob')
Here's a demo to help clarify: http://jsfiddle.net/8zan1jyf/8/
/* to style ALL tds */
table.exm_table tbody tr td {background-color:pink;}
/* to style EVERY-OTHER td */
table.exm_table tbody tr:nth-child(odd) td {background-color:red;}
/* to style td WHERE THE PARENT TR HAS THE CLASSNAME 'odd' (nothing to do with actual odd/even ordering) */
table.exm_table tbody tr.odd td {background-color:blue;}
/* to style td WHERE THE PARENT TR HAS THE CLASSNAME 'bob' */
table.exm_table tbody tr.bob td {background-color:green;}
your initial css targets td and sets background to white (#fff)
you can just target classes directly
.exm_table {
background-color:#ffffff;
}
.odd {
background-color:#eeeeee;
}
I am making a table on a webpage inside Zetaboards forum software. When I am trying to create alternating background color for each row, the forum's default CSS intervenes.
My HTML:
<table class="stats">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
My CSS:
table.stats tbody tr:nth-child(even) {
background-color: #333;
}
table.stats tbody tr {
background-color: #232;
}
The above works just as I want it to in cssdeck.com. However, when I move it on my forum webpage, the forums "td" css takes over.
Forum CSS:
td {
background-image: ...;
background-color: ...;
background-position: ...;
...
}
How do I override the forum's default CSS?
I have tried adding !important, but it didn't work. I also tried to add a class for each "tr" and add tr.class in my css. That also didn't work.
I do have control over my forum's theme CSS. But I can't change it, since that "td" style is widely used across the forum design. I don't want to add a class to each td in my HTML either...
I appreciate any help I can get, thank you for your time!
Table cells are contained within table rows. When you apply background color to both rows and cells (as is the case with the above example) the cell background color will cover the rows' background color.
Workaround: add this rule to undo the forum's styles applied on table cells:
table.stats td {
background: transparent none;
}
And apply background color on rows (i.e. no change in your original example):
table.stats tbody tr:nth-child(even) {
background-color: #333;
}
table.stats tbody tr {
background-color: #232;
}
1.)you have to add td after tr in your css
Try this:
<style>
table.stats tbody tr td:nth-child(even) {
background-color: #333 !important ;
}
table.stats tbody tr td{
background-color: #232 !important ;
}
</style>
This is an example:
http://jsfiddle.net/Bq3AU/
I want nested table tr:first-child not to be red.
I know that I can use a code like:
table.calc table tr {
backgorund:none;
}
But this is only for one nested table. I want to write a css rule that colour only parent table row to be red.
I think it is something with '>' sign like table.calc > tr or something but I always had problems with '>'.
I think you cant use another class CSS for chiltable same that:
<table class="calc1">
<tr><td>title</td><td>title2</td></tr>
<tr>
<td>
<table class = "calc2">
<tr><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td></tr>
</table>
</td>
<td>
text
</td>
</tr>
<table>
CSS:
.calc1 tr:first-child {
background:red;
}
table td {
border:1px solid #000;
padding:10px;
}
.calc2 tr:first-child {
background:blue;
}
I think this is what you want, if not please clarify. I use white as a generic background color, you might choose another:
<style>
/*make all tables white */
table{
background:white;
}
/*make all first child tr's red*/
table tr:first-child{
background:red;
}
/*make all first child tr's that are part of child tables (not parents) white*/
table tr td table tr:first-child{
background:white;
}
/*so now only first child tr's of the top parent tables are red*/
</style>
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/