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>
Related
I want to change the background color of all td in a tr just using a class in the tr. I am using the following css
tr .yellow td{
background-color: yellow;
}
And I have following html
<tr class="yellow"><td></td> <td></td></tr>
But the background color is not changing. What is the mistake here?
You have a space before the class in your CSS declaration
tr.yellow td{
background-color: yellow;
}
You need to remove the space to indicate that the class is on the <tr> element. Without it you are suggesting that the hierarchy is:
tr, then something with a class of "yellow", then a td
e.g.
<tr>
<sometag class="yellow">
<td>
Which isn't what your DOM looks like.
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 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 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/
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 */