SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    1px css table border question

    I've got a css table border question/problem. Please look at this very simple code:

    <table border="1">
    <tr>
    <td>one</td>
    <td>two</td>
    </tr>
    <tr>
    <td colspan="2">three</td>
    </tr>
    </table>

    <table style="border: solid 1px black">
    <tr>
    <td>one</td>
    <td>two</td>
    </tr>
    <tr>
    <td colspan="2">three</td>
    </tr>
    </table>

    The first one, not using css, puts a border both around the outside of the table AND inside the table.

    The second, using cc, only puts a border around the outside of the table.

    What I'm trying to achieve is to use css to have a single 1px black line both inside and outside the table as per the first example.

    I've tried putting css borders inside the td tags, but this has the effect of 'doubling up' the border width where one td cell meets another.

    Any takers? Thanks in anticipation.
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <title>1px black table border</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    table.maintbl {
      border: 0;
      margin: 0 auto;
      width: 400px;
    }
    
    table.whitetbl {
      border: 0;
      width: 100%;
    }
    
    td.blackback {
      background-color: #000000;
      color: #000000;
    }
    
    td.whiteback {
      background-color: #ffffff;
      color: #000000;
      font-family: verdana, arial, helvetica, sans-serif;
      font-size: small;
    }
    -->
    </style>
    </head>
    
    <body>
    <table cellspacing="0" cellpadding="0" class="maintbl">
      <tr>
        <td class="blackback"> 
          <table cellspacing="1" cellpadding="5" class="whitetbl">
            <tr> 
              <td class="whiteback">just a test</td>
              <td class="whiteback">and column two</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    </body>
    </html>

  3. #3
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jeez - that's extreme. :-)

    Thanks for your help.

    Are you convinced that there's no easier way?!? It would be sad if there isn't.
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  4. #4
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Investigate the border-collapse property of CSS2. :-)
    Code:
    border-collapse: collapse;
    ~~Hope This Helps

  5. #5
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good work Ian! So I still have to define borders in each individual cell, but setting border-collapse:collapse for the outer table tag does the trick. Nice one. I can sleep easier tonight.

    <table style="border: solid 1px; border-collapse: collapse">
    <tr>
    <td style="border: solid 1px">one</td>
    <td style="border: solid 1px">two</td>
    </tr>
    <tr>
    <td colspan="2" style="border: solid 1px">three</td>
    </tr>
    </table>
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  6. #6
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Humm, that still seems like a lot of work. Try putting the style declarations in your document head and that should allow you to type a little less.
    Code:
    <style type="text/css">
    TABLE {
      border: solid 1px;
      border-collapse: collapse;
    }
    
    TD {
      border: solid 1px;
    }
    </style>
    ~~Ian

  7. #7
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Couldn't agree more - I was just being verbose by sticking the css definitions inline.
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm...couldn't that have been solved by just defining the cell spacing? I don't know if I have ever encountered a problem like this where I had to define all of that.

  9. #9
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by chill
    hmmm...couldn't that have been solved by just defining the cell spacing?
    Maybe. Why not test it and see? I'm always looking to improve my code and techniques, so if you find a better way, please post your findings here. By 'better' I mean a) less code and b) more cross-browser compatible (although I am a XHTML fan these days...).
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  10. #10
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    Originally posted by chill
    hmmm...couldn't that have been solved by just defining the cell spacing?
    Have you looked at the code I posted yet?

  11. #11
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by mattjacob

    Have you looked at the code I posted yet?
    Yes, but (no offense) I prefer the more recent code I've posted because:

    a) It doesn't involve tables within tables
    b) It doesn't involve setting background colors of tables

    ...to achieve the desired effect.
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  12. #12
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lets take this a next step further. What if you'd want to do this for some of the tables on your page and not for all? Try this:
    Code:
    <style type="text/css">
    	.test {
    		border: solid 1px;
    		border-collapse: collapse;
    		border-color : #000;
    	}
    
    	.test TD {
    		border: solid 1px;
    	}
    </style>
    
    <table class="test"> 
    <tr> 
    <td>one</td> 
    <td>two</td> 
    </tr> 
    <tr> 
    <td colspan="2">three</td> 
    </tr> 
    </table>
    
    <table> 
    <tr> 
    <td>one</td> 
    <td>two</td> 
    </tr> 
    <tr> 
    <td colspan="2">three</td> 
    </tr> 
    </table>

  13. #13
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great work Arkkimaagi!

    You know, I think that being a perfectionist and working as a programmer (whatever the language or markup) is a dangerous combination. What is 'the perfect code' for any given application? Sometimes I inuitively know that the code I'm writing could be bettered, and this thought sometimes keeps me awake at night.

    Sometime I wish I wasn't a perfectionist - I think I'd make more money (ie. more billable hours) because I could just do a job and move on. That's just not my style though.

    Thanks again.
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  14. #14
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heh, i have that problem too.


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
  •