Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

class td border

Status
Not open for further replies.

Laeg

Programmer
Nov 29, 2004
95
IE
I want to have 2 types of table styling

- A coloured table border on the outside of the table only
- A coloured table border outside and also on tds

So basically a square box vs a grid, this works in FF but not in IE, can anyone help me colour the tds in the grid in IE?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
 <head>
  <title> test</title>
  <style>
.NoGrid
{
width:800px;
border-width:1px;
border-style:solid;
border-color: #FFCA5E;
}
.Grid
{
width:800px;
border-width:1px;
border-style:solid;
border-color: #FFCA5E;
}
td.Grid
{
border-width:1px;
border-style:solid;
border-color: #FFCA5E;
}
  </style>
 </head>

 <body>
  <table class="NoGrid">
	<tr>
		<td>
			<table class="NoGrid">
				<tr>
					<td>
						<table class="Grid" rules="all">
							<tr>
								<td>a</td><td>b</td><td>c</td>
							</tr>
							<tr>
								<td>d</td><td>e</td><td>f</td>
							</tr>
						</table>
					</td>
					<td></td>
				</tr>
			</table>
		</td>
		<td></td>
	</tr>
	<tr>
		<td></td>
	</tr>
  </table>
 </body>
</html>
 
hmm, my css must be wrong, that makes every td have a border on its own so, the css above gives me

____________________________
| ________ ________ |
| |________| |________| |
| ________ ________ |
| |________| |________| |
|___________________________|

But I'm just looking for a straight forward coloured grid.
________________________
|_________ |___________|
|_________ |___________|
 
Try:

Code:
<table class="Grid" rules="all" [!]cellspacing="0"[/!]>

You might also want to set "border-collapse:collapse" as a rule on your table CSS.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top