SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting table border styles

    Scenario is that I have a table that I want to have a 1px solid black border on the outside. The cells on the row with th's should have borders between each cell, also 1px solid black. The other cells in the table have borders between each cell, 1px solid #ccc.

    What's the best way to do this? I tried styling the th's and td's to have a border-right, but then when you get to the last th in the row, the border gets doubled. I could certainly give the last th or td in each row a border=0, but I'm thinking there must be a more sophisticated way of doing it. Ideas?

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What does your code look like?

  3. #3
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The following works in FFox, IE5.5, IE6 & IE7. Can't open any other browsers to test at this time.

    Code HTML4Strict:
    <!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=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #maintable {
    width: 500px;
    margin: auto auto;
    border-collapse: collapse; /*this is what stops the double border appearing on cells*/
    border: 1px solid black;
    }
    #maintable th {border: 1px solid black}
     
    #maintable td{
    border: 1px solid #CCC;
    }
    -->
    </style>
    </head>
    <body>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" id="maintable">
    <tr>
    <th scope="col">Heading 1</th>
    <th scope="col">Heading 2</th>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>

    PS: It's the border-collapse property that removes the double border lines

    Nadia

  4. #4
    SitePoint Zealot ozwebfx's Avatar
    Join Date
    Dec 2004
    Location
    Melbourne, Australia
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nadia is my new guru!

  5. #5
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Nadia P View Post
    The following works in FFox, IE5.5, IE6 & IE7.
    PS: It's the border-collapse property that removes the double border lines
    Nadia
    This sounds like a great fix but what happened when I brought up the sample is that the black border around the table disappears in favor of the td border color. I even tried marking it ! important but that didn't help. Any ideas for how to get the black border around the whole thing?


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
  •