I have css that works on all tr tags for the table.
so in my html I have no styling for tr tag. However, for one TR tag in my table I do not want to apply the TR that is generic to all tables. Is there a way to exclude this TR?
.statisticsTable {
border:2px solid #990000;
width:100%;
}
.statisticsTable tr {
font-weight : bold;
font-size : 9pt;
font-family : Arial,Helvetica,sans-serif,Verdana,Geneva;
color: #ffffff;
background-color:#990000;
}
<table class="statisticsTable">
<tr><td colspan="7" class="tableHeaderText">HUB Statistics</td></tr>
<tr>
<th colspan="2">HUB</th>
<th >House Houlds Evaluated</th>
<th >Total Debt Owed</th>
</tr>
<tr class="<s:if test="#status.even">even</s:if><s:else>odd</s:else>">
<td rowspan=3 valign=top>213-65-6425</td>
<td >All</td>
<td >t1</td>
<td >t2</td>
in above the <tr> that has class of either 'even' or 'odd' I do not want this <tr> to have .statisticsTable tr properties. is this possible?
Main think I want to avoid is background-color: #990000; and color: #ffffff;
-
You have a few options, the easiest I can see in your situation is override the CSS in statisticsTable with further CSS to the style you want in the classes 'even' and 'odd'.
-
CSS cascades, meaning you can overwrite the values of previously defined properties.
You would do:
.statisticsTable tr.even, .statisticsTable tr.odd { font-weight: normal; font-size: DEFAULT; /* what ever your default is */ font-family: DEFAULT; /* what ever your default is */ /* I would use the font shorthand property */ color: DEFAULT; background: DEFAULT; }If you want to use CSS3, you can use :not to only apply the following styles to TR elements which don't have the even or odd class:
.statisticsTable tr:not(.even, .odd) { font: bold 9pt Arial,Helvetica,sans-serif,Verdana,Geneva; color: #fff; background:#990000; }Nick Presta : The first snippet goes after your styles for all TRs. In your code example, it would appear at the end, 'resetting' the styles you applied.Calvin : He's saying that you can overwrite your original CSS rule by defining a rule with a more specific selector after it. -
In a browser that supports CSS3 pseudo-selectors (this includes most browsers, notably inluding IE7 and IE88 and not IE6), a selector like .statisticsTable tr:not(.even):not(.odd) for that second rule grouping would do what you want.
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.