Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS: how to disable cellspacing for one row?

Posted on 2004-10-23
12
Medium Priority
?
1,450 Views
Last Modified: 2010-08-05
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?
0
Comment
Question by:Smoerble
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +5
12 Comments
 
LVL 10

Expert Comment

by:dij8
ID: 12388030
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
 

Author Comment

by:Smoerble
ID: 12388044
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
 

Expert Comment

by:catmur
ID: 12388126
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 36

Accepted Solution

by:
Zyloch earned 2000 total points
ID: 12388331
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 12388343
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
 

Author Comment

by:Smoerble
ID: 12388349
@ 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
 

Author Comment

by:Smoerble
ID: 12388604
Works perfect, thanks a lot, evry good and very fast answer.
500pts for you.
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 12388936
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
 
LVL 10

Expert Comment

by:frugle
ID: 12389723
how does putting a TD in a THEAD tag differ from using TH tags?

Mike
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 12389815
Well, you could also have <th> inside a <thead>. It's just an extra level in the hierarchy.

-r-
0
 
LVL 1

Expert Comment

by:shaymasterus
ID: 12392680
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
 
LVL 18

Expert Comment

by:arantius
ID: 12396137
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Suggested Courses

609 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question