SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict frankiehots's Avatar
    Join Date
    Jan 2002
    Location
    U.S.A. *Blue State*
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adjusting a Table with CSS

    Is there a way to change the border size of an entire table with many cells by just applying a style to the table tag only?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think you can only change the cell borders by putting a style in the td tag. Putting a border style in the table tag only affexts the outside border of the table and not the cells (as far as I know).

    (If you want to get rid of the gaps between cells use border-collapse:collapse in the table tag although I think it only works on recent browsers etc.)

    Something like this should work:

    Code:
    <style type="text/css" media="screen">
    <!--
    table {
     border-collapse:collapse
    }
    td {
     border: 5px solid #0033FF; 
    }
    -->
    </style>
    Of course you could use a class or id as the above will affect all tables.

    Hope this is of some use.

    Paul

  3. #3
    SitePoint Addict frankiehots's Avatar
    Join Date
    Jan 2002
    Location
    U.S.A. *Blue State*
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am trying to avoid having to tag every td cell. I'd like to have the entire table (outside and inside cells) have a 1px border. Anyone else have any ideas?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Did you try my code above ?

    I'm not sure what you are talking about all you need to do is put the code in my first post in your stylesheet and you won't have to put anything in any table tags or td tags.

    If you only want to apply the border to one specific table then wrap the table in a class or id as follows:

    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">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen">
    <!--
    #maintable table {
     border-collapse:collapse
    }
    #maintable td {
     border: 5px solid #0033FF; 
    }
    -->
    </style>
    </head>
    <body>
    <div id="maintable">
    <table width="20%" >
      <tr> 
    	<td >hello</td>
    	<td>&nbsp;</td>
    	<td>&nbsp;</td>
      </tr>
      <tr> 
    	<td>&nbsp;</td>
    	<td>&nbsp;</td>
    	<td>hello</td>
      </tr>
      <tr> 
    	<td>&nbsp;</td>
    	<td>&nbsp;</td>
    	<td>&nbsp;</td>
      </tr>
    </table>
    </div>
    </body>
    </html>
    If I've got the wrong end of the stick sorry!

    Paul

  5. #5
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by frankiehots
    I am trying to avoid having to tag every td cell. I'd like to have the entire table (outside and inside cells) have a 1px border. Anyone else have any ideas?
    Had a go and tried this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Table with 1px border</title>
    <style type="text/css">
    table {
    	border-left: 1px solid green;
    	border-top: 1px solid green;
    }
    td {
    	border-right: 1px solid red;
    	border-bottom: 1px solid red;
    }
    </style>
    </head>
    <body>
    <!-- Please note the 'cellspacing' This is the only cross-browser-safe
         way to have no space between the cells -->
    <table cellspacing="0">
    	<tr>
    		<td>1</td><td>2</td><td>3</td><td>4</td>
    	</tr><tr>
    		<td>5</td><td>6</td><td>7</td><td>8</td>
    	</tr><tr>
    		<td>9</td><td>10</td><td>11</td><td>12</td>
    	</tr><tr>
    		<td>13</td><td>14</td><td>15</td><td>16</td>
    	</tr>
    </table>
    </body>
    </html>
    Works for me on IE5.0, Mozilla1.0 Opera6.05

    Greetings

    Rik
    Last edited by Zoef; Mar 31, 2003 at 11:42.
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  6. #6
    SitePoint Addict frankiehots's Avatar
    Join Date
    Jan 2002
    Location
    U.S.A. *Blue State*
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem with the methods suggested is I set a style for sitewide appearance of all other td cells. The only way these td cells don't inherit the sitewide style is to tag every one. That's what i was trying to avoid. Another problem with the mehtods suggested above is there are other td cells on the same page that I don't want to have the 1px border style.
    Last edited by frankiehots; Apr 1, 2003 at 09:03.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by frankiehots
    The problem with the methods suggested is I set a style for sitewide appearance of all other td cells. The only way these td cells don't inherit the sitewide style is to tag every one. That's what i was trying to avoid. Another problem with the mehtods suggested above is there are other td cells on the same page that I don't want to have the 1px border style.
    I'm not sure I understand (unless I've misunderstood you) why you can't give the table a class or id (or wrap the table in a div with a class or id) as I suggested (and showed) in my earlier post, then the other tables will not inherit the styles.

    Perhaps it would be easier if you have a link to the page and table in question so we could see exactly what you want.

    Paul

  8. #8
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to show you what Paul means, here's the same table from above, once with borders and once without:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Table with 1px border</title>
    <style type="text/css">
    #borders table {
    	border-left: 1px solid green;
    	border-top: 1px solid green;
    }
    #borders td {
    	border-right: 1px solid red;
    	border-bottom: 1px solid red;
    }
    </style>
    </head>
    <body>
    <!-- This table is wrapped in the div with id "borders" -->
    <div id="borders">
    <table cellspacing="0">
    	<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    	<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
    	<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
    	<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
    </table>
    </div>
    <!-- This table has no borders -->
    <table cellspacing="0">
    	<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    	<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
    	<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
    	<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
    </table>
    </body>
    </html>
    Greetings,

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  9. #9
    SitePoint Addict frankiehots's Avatar
    Join Date
    Jan 2002
    Location
    U.S.A. *Blue State*
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, it worked guys. Thanks for the help.


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
  •