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

    Join Date
    Oct 2003
    Location
    Surrey, UK
    Posts
    224
    Rep Power
    11

    CSS and bordering only certain table cells


    Hi, I have the following code which is for a table.
    Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    			      <tr>
    			        <td>&nbsp;</td>
    		          </tr>
    			      <tr>
    			        <td><a name="A"></a>A</td>
    		          </tr>
    			      <tr>
    			        <td>&nbsp;</td>
    		          </tr>
    			      <tr>
    			        <td><a name="B"></a>B</td>
    		          </tr>
    			      <tr>
    			        <td>&nbsp;</td>
    		          </tr>
    			      <tr>
    			        <td><a name="C"></a>C</td>
    		          </tr>
    			      <tr>
    			        <td>&nbsp;</td>
    		          </tr>
    			      <tr>
    			        <td><a name="D"></a>D</td>
    		          </tr>
    			      <tr>
    			        <td>&nbsp;</td>
    		          </tr>
    			      <tr>
    			        <td><a name="E"></a>E</td>
    		          </tr>
    			      <tr>
    			        <td>&nbsp;</td>
    		          </tr>
    			      <tr>
    			        <td><a name="F"></a>F</td>
    		          </tr>
    			      <tr>
    			        <td>&nbsp;</td>
    		          </tr>
    			      <tr>
    			        <td><a name="G"></a>G</td>
    		          </tr>
    			      <tr>
    			        <td>&nbsp;</td>
    		          </tr>
    			      <tr>
    			        <td><a name="H"></a>H</td>
    		          </tr>
    			      <tr>
    			        <td>&nbsp;</td>
    		          </tr>
    			      <tr>
    			        <td><a name="I"></a>I</td>
    		          </tr>
    			      <tr>
    			        <td>&nbsp;</td>
    		          </tr>
    			      <tr>
    			        <td><a name="J"></a>J</td>
    		          </tr>
    			      <tr>
    			        <td>&nbsp;</td>
    		          </tr>
    			      <tr>
    			        <td><a name="K"></a>K</td>
    		          </tr>
    			      <tr>
    			        <td>&nbsp;</td>
    		          </tr>
    			      <tr>
    			        <td><a name="L"></a>L</td>
    		          </tr>
    			      <tr>
    			        <td>&nbsp;</td>
    		          </tr>
    			      <tr>
    			        <td><a name="M"></a>M</td>
    		          </tr>
    			      <tr>
    			        <td>&nbsp;</td>
    		          </tr>
    			      <tr>
    			        <td><a name="N"></a>N</td>
    		          </tr>
    			      <tr>
    			        <td>&nbsp;</td>
    		          </tr>
    			      <tr>
    			        <td><a name="O"></a>O</td>
    		          </tr>
    			      <tr>
    			        <td>&nbsp;</td>
    		          </tr>
    			      <tr>
    			        <td><a name="P"></a>P</td>
    		          </tr>
    			      <tr>
    			        <td>&nbsp;</td>
    		          </tr>
    			      <tr>
    			        <td><a name="Q"></a>Q</td>
    		          </tr>
    			      <tr>
    			        <td>&nbsp;</td>
    		          </tr>
    
    		        </table>
    What I want to do is to have a black 1px border around the cells with the letters in, in A, B, C , D etc etc.

    I am hoping it is a CSS thing, but I only want it to apply to this table, not all the other tables on the page.

    Anyone know the easiest way to do this?

    Thanks
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    15
    Rep Power
    0
    Hi,

    Just setup a style:

    Code:
    <style type="text/css">
    .bbox { border: 1px solid black; };
    </style>
    and apply it to the cells you want:

    Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr><td>&nbsp;</td></tr>
      <tr><td class="bbox"><a name="A"></a>A</td></tr>
      <tr><td>&nbsp;</td></tr>
      <tr><td class="bbox"><a name="B"></a>B</td></tr>
    
    etc...
    Simon
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Surrey, UK
    Posts
    224
    Rep Power
    11
    Ok. I've got that working now. However, I'm trying to do something else. I want to use CSS for all my existing tables as I just tried my site in Mozilla and the borders don't come out how they should, so I used some CSS and it works properly. This is what I have at the moment.

    TABLE.border {
    border-style: solid;
    border-width: 2px;
    border-color: 000000;
    padding: 0px;
    }

    And I use it like <table class="border" etc etc. This puts a 2px border around the table, but how do I get the cells inside to have borders as well. A 1px line between each row is what I'm after, so that the border is thinner than the outer border of the table.

    Thanks
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    15
    Rep Power
    0
    You don't need to declare the style as "TABLE.name", just use ".name", and use <table class="name">. That way the style can be applied to other elements as well.

    For the cell borders, declare a style and do <td class="name">

    You can use { border-bottom: 1px solid gray } to put a line between each row.

    You can apply any style to any html element, so you can put borders around most things this way, div's, forms, tables, cells, <a>'s, anything.

    Simon
  8. #5
  9. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    just use the cascading in css

    table.border td {
    border:1px solid #000;
    }

    affects every td with in the table with class border.

    you can also add,

    border-collapse:collapse;

    to the table.border element.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    15
    Rep Power
    0
    The cascade is fine if you wan't to affect every cell in a table, otherwise you have to use individual class attributes.

    Simon
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Surrey, UK
    Posts
    224
    Rep Power
    11
    Originally Posted by Akh
    you can also add,
    border-collapse:collapse;
    to the table.border element.
    Thanks.

    What does the border-collapse:collapse do?
  14. #8
  15. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    you don't have to use classes,
    you can use Adjacent sibling selectors +
    http://www.w3.org/TR/2004/CR-CSS21-2...cent-selectors

    then you could set diffrent style to
    table.border td
    and to
    table.border td + td

    of course this wouldn't work in msie,
    but it work in every other modern browsers (moz, opera, konq)

    just for an example with this in practice
    http://www.9ls.org/test/css-examples/chess.html
  16. #9
  17. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    border-collapse:collapse;
    makes the space between the "table border" and the "td borders" to collapse,

    http://www.w3.org/TR/CSS2/tables.htm...apsing-borders

IMN logo majestic logo threadwatch logo seochat tools logo