#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    365
    Rep Power
    11

    using CSS for Table border problem


    just getting into the css world for real, and im using it for the borders of a table:
    border:1px solid #000000;
    except this only does the outside border of the table, and not the borders for the rows/columns
    do i need to have another .cell in my css to get each one to work?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    19
    There are a few different ways to do it

    Code:
    <style type="text/css">
    <!--
    table {
    	border: 1px solid #000000;
    }
    td {
    	border: 1px solid #000000;
    }
    -->
    </style>
    </head>
    
    <body>
    <table width="300" cellpadding="0" cellspacing="0">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    19
    If you want to keep the 1px thickness

    Code:
    <style type="text/css">
    <!--
    table {
    	border-top: 1px solid #000000;
    	border-right: 1px none #000000;
    	border-bottom: 1px none #000000;
    	border-left: 1px solid #000000;
    }
    td {
    	border-top: 1px none #000000;
    	border-right: 1px solid #000000;
    	border-bottom: 1px solid #000000;
    	border-left: 1px none #000000;
    }
    -->
    </style>
    </head>
    
    <body>
    <table width="300" cellpadding="0" cellspacing="0">
      <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>
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    365
    Rep Power
    11
    could i do:
    table.name {
    border:1px solid #000000;
    }
    td.name {
    border:1px solid #000000;
    }

    so that it only affects the table with the class='name' in it?
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    19
    yes, the code i posted were basic examples.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    365
    Rep Power
    11
    it seems like the td.name only applies if each column contains class='name' (which is correct)
    any easier way for it to affect the whole table without duplicating code?

    for non-duplicating i found out that you can do:

    table.name,td.name {
    /*code here*/
    }

    but still not found an alternative for putting:
    <td class='columnclass'>
    on every column
    Last edited by helz; May 13th, 2004 at 05:04 PM.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    19
    Code:
    <style type="text/css">
    <!--
    table.red {
    	border-top: 1px solid #FF0000;
    	border-right: 1px none #FF0000;
    	border-bottom: 1px none #FF0000;
    	border-left: 1px solid #FF0000;
    }
    table.red * td {
    	border-top: 1px none #FF0000;
    	border-right: 1px solid #FF0000;
    	border-bottom: 1px solid #FF0000;
    	border-left: 1px none #FF0000;
    }
    
    table.blue {
    	border-top: 1px solid #0000FF;
    	border-right: 1px none #0000FF;
    	border-bottom: 1px none #0000FF;
    	border-left: 1px solid #0000FF;
    }
    table.blue * td {
    	border-top: 1px none #0000FF;
    	border-right: 1px solid #0000FF;
    	border-bottom: 1px solid #0000FF;
    	border-left: 1px none #0000FF;
    }
    -->
    </style>
    </head>
    
    <body>
    <table width="300" cellpadding="0" cellspacing="0" class="red">
      <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>
    
    <p>&nbsp;</p>
    <table width="300" cellpadding="0" cellspacing="0" class="blue">
      <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>
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    365
    Rep Power
    11
    superb!

    changed my code to:
    table.name * td {
    /* code here */
    }
    and it worked
    Good Job!!
  16. #9
  17. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    you can do it like this, the * is not needed.
    the border-collapse:collapse; removes the space between the table border and the cells border.



    Code:
    table.name {
    	border:1px solid #000;
    	border-collapse:collapse;
    }
    
    table.name td {
    	border:1px solid #000;
    }
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    19
    Posted it the other way because collapse has browser compatability issues.
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    365
    Rep Power
    11
    i have a table thats generated automatically, when there are less cells to fill the columns it leaves gaps
    example:
    Code:
    <table>
    <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
    </tr>
    <tr>
    <td>column1
    </tr>
    </table>
    as you can see there is only one column in row 2 so there are gaps
    does:
    empty-cell:show;
    display the empty columns?
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    19
    Actually, that not good sturcture.
    You should see if you can either use colspan or create cells with a &nbsp; entry
    <table>
    <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
    </tr>
    <tr>
    <td colspan="3">column1</td>
    </tr>
    </table>
  24. #13
  25. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    Originally Posted by degsy
    Posted it the other way because collapse has browser compatability issues.
    as far as i know there isn't any problem with the border-collapse property,

    there is a minor bug in msie, but not really an issue for not using border-collapse.

    so it should be safe to use,
    i would say your method might easier cause problems.
  26. #14
  27. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    19
    there is a minor bug in msie, but not really an issue for not using border-collapse.
    That was probably what I was thinking of.

    I remeber having problems with it at some stage, it was probably NS4
  28. #15
  29. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    365
    Rep Power
    11
    yeh that problem i posted i already fixed by creating empty cells

IMN logo majestic logo threadwatch logo seochat tools logo