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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
ZylochConnect With a Mentor Commented:
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
 
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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
 
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
All Courses

From novice to tech pro — start learning today.