okay y’all, i pretty much know this, or t least i think i do. but it just won’t take effect.
here is my (current) CSS:
.odd {background-color:#fff9ed; border-top:1px solid #eee; border-bottom:1px solid #eee;}
table#webCompare.thVertical {border-right: 1px solid #eee;}
table#webCompare.thHorizontal {border-bottom: 1px solid #eee;}
i’ve tried it several ways, including table.thVertical and .thVertical. at one point the right border did show up, but it was senseless without the horizontal borders so i’mjust going with odd/even row background colors for now.
it also works if i give the entire table a border but that’s just, well, ugly.
the CSS is among the last declarations on the stylesheet, so I don’t think it is being overridden by something later in the cascade.
so please, everyone enjoy a hearty laugh (with me), and then tell me what obvious thing i should know if i don’t already i am missing.
thanks!
ralphm
August 9, 2012, 12:19am
2
We’d need to see your HTML to know if you are targeting the right elements or not. What are you actually trying to do?
<table width="100%" border="0" cellpadding="4" cellspacing="0" bordercolor="#FFFFFF" id="webCompare">
<tr valign="bottom" class="thHorizontal">
<th class="thVertical" scope="col"></th>
<th align="left" scope="col">1<br /></th>
<th align="left" scope="col">2</th>
<th align="left" scope="col">3</th>
<th align="left" scope="col">4</th>
<th align="left" scope="col">5</th>
<th align="left" scope="col">6</th>
</tr>
<tr class="odd">
<th align="right" valign="top" class="thVertical" scope="row">A </th>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes</td>
</tr>
<tr>
<th align="right" valign="top" class="thVertical" scope="row">B </th>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes/td>
<td align="left" valign="top">Yes</td>
</tr>
<tr class="odd">
<th align="right" valign="top" class="thVertical" scope="row">C </th>
<td align="left" valign="top">UYes/td>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">UYes/td>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes/td>
<td align="left" valign="top">Yes</td>
</tr>
<tr>
<th align="right" valign="top" class="thVertical" scope="row">D </th>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes</td>
</tr>
<tr class="odd">
<th align="right" valign="top" class="thVertical" scope="row">E </th>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes</td>
<td align="left" valign="top">Yes</td>
</tr>
</table>
ralphm
August 9, 2012, 12:40am
4
Because the class and id are not on the same element, you need a space between them:
table#webCompare [COLOR="#FF0000"].[/COLOR]thVertical {border-right: 1px solid #eee;}
table#webCompare [COLOR="#FF0000"].[/COLOR]thHorizontal [COLOR="#FF0000"]th[/COLOR] {border-bottom: 1px solid #eee;}
In the second line I added th to make the bottom border work.
thanks!
that gave me the th borders i wanted, and–after some trial and error–i was able to get top and bottom borders on my odd rows. turns out i had to use td rather than tr. (which is why i prefer using cell padding over cell spacing.)
and, i learned some new stuff!
