Solved

CSS: how to disable cellspacing for one row?

Posted on 2004-10-23
1,425 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
Question by:Smoerble
    12 Comments
     
    LVL 10

    Expert Comment

    by:dij8
    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
    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
    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
     
    LVL 36

    Accepted Solution

    by:
    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
    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
    @ 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
    Works perfect, thanks a lot, evry good and very fast answer.
    500pts for you.
    0
     
    LVL 49

    Expert Comment

    by:Roonaan
    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
    how does putting a TD in a THEAD tag differ from using TH tags?

    Mike
    0
     
    LVL 49

    Expert Comment

    by:Roonaan
    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
    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
    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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Cisco Complete Network Certification Training

    If you’re an IT engineer or technician, it's time you take your career to the next level. This elite training bundle is brimming with all of the information you need to learn to sit for Cisco CNNA, CCNP, and CCENT certification exams.

    Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
    Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
    Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
    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…

    934 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

    Need Help in Real-Time?

    Connect with top rated Experts

    8 Experts available now in Live!

    Get 1:1 Help Now