CSS: how to disable cellspacing for one row?

hoi all...

I have a table where noramlly I want to have a border around each td.
To do this, I use a code like this:

--------------------
<style>
.forum { background:#000; }
.forum td { padding:3px; }
</style>

<table class="forum" width="95%" cellpadding="0" cellspacing="1" align="center">
<tr><td>....</td><td>....</td></tr>
</table>
--------------------

Now I want to have no border for just one row. I tried to use seomthing like this:
--------------------
<tr><td style="margin:0px;">...</td>.....
--------------------

But this did not work.

Any ideas how to get this working?
SmoerbleAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

dij8Commented:
Not exactly sure what you mean here because you don't have a border set anyway.  If, however, you mean the padding you can override the class padding by setting the style inline in each cell on the row:
<tr><td style="padding:0px;">....</td><td style="padding:0px;">....</td></tr>
0
SmoerbleAuthor Commented:
I have the border by haveing the table spacing="1" and a background color in black.
I made a small istake in the code above, so here's the "complete" code:

--------------------
<style>
.forum { background:#000; }
.forum td { padding:3px; background:#fff; }
.headline td { background:#cc0; }
</style>

<table class="forum" width="95%" cellpadding="0" cellspacing="1" align="center">
<tr class="headline"><td colspan="2">some text without a border</tr>
<tr><td>....</td><td>....</td></tr>
<tr><td>....</td><td>....</td></tr>
</table>
--------------------

This creates a table with a border around each td, now I look for a way to have only the first <tr> without a border.

If I e.g. make a border around each td, then I have think lines in the midle of the table. So just turning borders "on" for a td does not help.
0
catmurCommented:
If I understand what you are asking then you may be better to have two tables on top of each other, with the first of the two tables having "cellspacing=0", and the second having "cellspacing=1".

See below:

######################################################
<style>
.forum { background:#000; }
.forum td { padding:3px; background:#fff; }
.headline td { background:#cc0; }
</style>

<table class="forum" width="95%" cellpadding="0" cellspacing="0" align="center">
      <tr class="headline"><td colspan="2">some text without a border</tr>
</table>
<table class="forum" width="95%" cellpadding="0" cellspacing="1" align="center">
      <tr><td>....</td><td>....</td></tr>
      <tr><td>....</td><td>....</td></tr>
</table>
######################################################
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

ZylochCommented:
Why not just this:

<style type="text/css">
.forum {background-color:#000;border-collapse:collapse;}
.forum tr td {padding:3px;background:#fff; border:1px solid black;}
.forum tr.headline td {border:none;}
</style>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ZylochCommented:
And in your table, change cellspacing="1" to cellspacing="0"

While it's fine in Mozilla either way, IE has a faulty rendering of this, so do that.
0
SmoerbleAuthor Commented:
@ catmur:
Because this is a simplified example, the real table is way more complex, for layout reasons I can't use any indented tables.

@zyloch:
looks great, works perfect in the example, will test this now with the real code.
0
SmoerbleAuthor Commented:
Works perfect, thanks a lot, evry good and very fast answer.
500pts for you.
0
RoonaanCommented:
As a small adjustment to ZyLoch.

better use the tags where they are used for:

<style type="text/css">
.forum {background-color:#000;border-collapse:collapse;}
.forum tbody td {padding:3px;background:#fff; border:1px solid black;}
.forum thead td {border:none;}
</style>

<table class="forum" width="95%" cellpadding="0" cellspacing="0" align="center">
 <thead>
  <tr><td colspan="2">some text without a border</tr>
 </thead>
 <tbody>
  <tr><td>....</td><td>....</td></tr>
  <tr><td>....</td><td>....</td></tr>
 </tbody>
</table>

Regards

-r-
0
frugleCommented:
how does putting a TD in a THEAD tag differ from using TH tags?

Mike
0
RoonaanCommented:
Well, you could also have <th> inside a <thead>. It's just an extra level in the hierarchy.

-r-
0
shaymasterusCommented:
note to all..
same results less code:

.forum {border-collapse:collapse;}
.forum td {padding:3px;border:1px solid black;}
.headline td {border:none;}

the tr is not necessary to inherit the declaration, neither is the above mentioned class hierarchy
-s
0
arantiusCommented:
Well apparently you've already chosen a "winner" but, I have to put in my two cents because I hate using table backgrounds for "borders" so I say this is the "right" way to do it.  Remove tr.noborder from the 2nd rule if you don't want the tables outer border to continue around it.  =)

<html>
<head>
<style type="text/css">
table {
      border-collapse: collapse;
      border-spacing: 0;
}
td, tr.noborder {
      margin: 0;
      border: 1px solid black;
}
tr.noborder td {
      border: none;
}
</style>
</head>
<body>

<table>
      <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
      </tr>
      <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
      </tr>
      <tr class="noborder">
            <td>A</td>
            <td>B</td>
            <td>C</td>
      </tr>
      <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
      </tr>
</table>
</body>
</html>
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.