MS-IE and how to place a border around a row <tr>?

Discussion in 'HTML & Website Design' started by classifieds, Dec 12, 2005.

  1. #1
    I'm trying to figure out how to use css to display a border around one row in a table.

    It works fine in FF but does not display in MS-IE.

    I've tried every permatation that I could think of and scoured the faqs but I haven't been able to make it work with both browsers.

    Any help would be appreciated. . .

    Thanks,
    -jay

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    
    #itemrows { border-collapse: collapse; border: 1px solid #777; margin: 0; padding: 0; }
    #itemrows h2 { font-weight:normal; display: inline; margin: 0; font-size:10px;}
    #itemrows th { border: 1px solid #aaa; background-color: #003399; color: #fff; text-align: center; padding: 0.25em; font-size: 110%; }
    #itemrows td {border: 1px solid #aaa; padding: 0.4em; }
    #itemrows tr.boldrow {border: 5px solid #000; padding: 0.4em; }
    -->
    </style>
    </head>
    <body>
    <table id="itemrows" width="75%">
      <tr>
        <th scope="col">Column 1</th>
        <th scope="col">Column 2</th>
        <th scope="col">Column3</th>
      </tr>
      <tr>
        <td>Row1</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr class="boldrow">
        <td>Row2</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>Row3</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>Row4</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
    
    Code (markup):
     
    classifieds, Dec 12, 2005 IP
  2. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try something funky like:

    .boldrow td { border-top:5px solid #000 ; border-bottom:2px solid #000 }
    .first { border-left:5px solid #000 }
    .last { border-right:5px solid #000 }

    <tr class="boldrow">
    <td class="first">Row2</td>
    <td>&nbsp;</td>
    <td class="last">&nbsp;</td>
    </tr>

    It might seem a little kludgy, but it'll do precisely what you're asking :)
     
    the_pm, Dec 12, 2005 IP
    classifieds likes this.
  3. classifieds

    classifieds Sopchoppy Flash

    Messages:
    825
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    150
    #3
    Thanks for the suggestions. . .

    I was hoping for something more elegant - but at this point I'm looking for anything that works :D

    Regards,

    -jay
     
    classifieds, Dec 13, 2005 IP
  4. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Unfortunately, when you're talking about IE, elegance isn't always an option. But there's always a way to make it happen. One day, IE will catch up...here's hoping IE7 will be the time.
     
    the_pm, Dec 13, 2005 IP