SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    table row top/bottom borders won't take -- feeling really lame right now, lol.

    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:
    Code:
    .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!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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?

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <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&nbsp;</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&nbsp;</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&nbsp;</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&nbsp;</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&nbsp;</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>

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Because the class and id are not on the same element, you need a space between them:

    Code:
    table#webCompare .thVertical {border-right: 1px solid #eee;}
    table#webCompare .thHorizontal th {border-bottom: 1px solid #eee;}
    In the second line I added th to make the bottom border work.

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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! :-)

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Cool, glad that helped.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •