Adjusting a Table with CSS

**frankiehots** · Mar 31, 2003 08:40

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?

**Paul O'B** · Mar 31, 2003 09:44

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

**frankiehots** · Mar 31, 2003 10:40

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?

**Paul O'B** · Mar 31, 2003 11:38

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

**Zoef** · Mar 31, 2003 11:40

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

**frankiehots** · Apr 1, 2003 08:58

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.

**Paul O'B** · Apr 1, 2003 10:25

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

**Zoef** · Apr 1, 2003 13:21

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

**frankiehots** · Apr 3, 2003 13:23

Ok, it worked guys. Thanks for the help.

User Tag List

Thread: Adjusting a Table with CSS

Thread Tools

Display

Adjusting a Table with CSS

Bookmarks

Bookmarks

Posting Permissions