4 replies [Last post]
Damien
Offline
Regular
Adelaide, South Australia
Last seen: 16 years 2 weeks ago
Adelaide, South Australia
Joined: 2003-09-05
Posts: 16
Points: 0

I currently have this CSS to make all of my tables without borders, cellpadding, spacing and the cells aligned to the top left.

td {
  padding: 0px;
  text-align: left;
  vertical-align: top;
}
table {
  border-collapse: collapse;
  border: 0px;
}

The problem is that the above CSS is clashing with the CSS below:

.form {
	background-color: #EEE;
	border: double 3px #C00;
	border-collapse: seperate;
	border-spacing: 5px;
}

<table class="form">

It works fine when I remove the first snippet of code, but I need it there. Both snippets are in the same style sheet. Here is an example.

The aim is to have a cellspacing of 5px on the table that has the .form class.

Thanks for any help! Laughing out loud

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 11 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

More problems with border-collapse

Hi Damien,
border-spacing is not supported by IE and I can't seem to see it in Netscape either.
You could try adding padding to .form table like: table.form td{padding:5px;}

Hope that helps

Damien
Offline
Regular
Adelaide, South Australia
Last seen: 16 years 2 weeks ago
Adelaide, South Australia
Joined: 2003-09-05
Posts: 16
Points: 0

More problems with border-collapse

Sorry, padding isn't what I'm after. I'm trying to go for cellspacing. The things is that it works when the table style if removed. It is probably something small that I am missing.

Thanks for your suggestion anyway. Laughing out loud

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 11 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

More problems with border-collapse

Hi Damien,
You did make a mistake, you need to use the American spelling of separate instead of seperate. Doing that will get the affect your after in Netscape bur as I said above border-spacing will not work in IE.
The reason it seemed to work when you removed the border-collapse: collapse, is that the default setting for border-collapse is separate.

Hope that helps.

Damien
Offline
Regular
Adelaide, South Australia
Last seen: 16 years 2 weeks ago
Adelaide, South Australia
Joined: 2003-09-05
Posts: 16
Points: 0

More problems with border-collapse

I knew it was something wrong with that line! I thought it was just I was using the wrong attribute. I never knew that Americans spelt "seperate" differently. Silly Ol' Americans. Laughing out loud

Here is the CSS I ended up using:

.form {
  background-color: #EEE;
  border: double 3px #C00;
  border-collapse: separate;
  border-spacing: 5px;
}

The only problem now is the border-spacing isn't working. I now have cellspacing but I can't define how much cellspacing, yet the W3C CSS Tables Example says that it whould all work nicely. Oh boy, my face is turning a dark, dark red.

Thanks for your help! Cool

EDIT: It works in Opera, but not in Internet Explorer. That must be the problem! Oh well, I'll put up with it, the differece isn't very noticable. Went back and read your post more carefully. I wonder if there is an alternative to border-spacing.