Set CSS cell-spacing for TD

Question

So I have this certain table. I know I'm not supposed to use table for layout, but in this case I'm forced to.

I need to style a specific TD's cell-spacing (the TD with the class .ritey). I know I have to target the TABLE to set its cell-spacing, but I don't want other TDs got affected. I only need to style this single TD.

Is there any way to do this?

Here is a quick rough sketch with MS Paint, I hope this explains what I need:

In the overall layout there will be multiple rows (multiple TR). In this question I only show one row. I need all columns (all TDs) to remain unchanged, except for .ritey. I want .ritey to have 10px margin around it (margin, not padding). I hope this explains better!

.

And here is what I got in my HTML. I tried td.ritey { border-spacing:10px; } but it does not seem to work.

  <table width='100%' border='0' cellspacing='1' cellpadding='3' class='postable'>
  <tr>
  <td valign='middle' class='row4 uname' colspan='2'>
  <div class='name'>
   <a href='#'>Guest</a>
  </div>
  </td>
  </tr><tr>
  <td width='100%' valign='top' class='ritey'>
        <div class='postcolor'>
         Post content
        </div>
  </td><td valign='top' class='lefty'>
    <div class='postdetails'>
    Details
</div>
  </td>
  </tr></table>

Any help is really appreciated.

Solution

In CSS, you would use padding for cellpadding and border-spacing for cellspacing. Here's the working code:

EDIT

I revised the CSS according to the image you provided. I added extra styling for the postcolor class. See the updated CSS and Fiddle. I also updated the screenshot.

If you want the borders to collapse, change border-collapse to collapse and remove the border-spacing property.

<style type="text/css">    
    table.postable {
      border-collapse: separate !important; 
      border-spacing: 1px;        
    }
    table.postable td {
      border:1px solid black;      
      padding: 5px;
    }
    td.ritey {
      border: 0px !important;
      padding: 10px 5px 10px 5px !important;
    }
    td.lefty {  
      padding: 10px 5px 10px 5px !important;    
    }
    div.postcolor {
      margin: 3px;
      padding: 10px;
      border: 1px solid black;   
    }         
</style>
<table width='100%' class='postable'>
    <tr>
       <td colspan='2'>
          <div class='name'>
             <a href='#'>Guest</a>
          </div>
       </td>
    </tr>
    <tr>
       <td width='100%' valign='top' class='ritey'>
          <div class='postcolor'>
             Post content
          </div>
       </td>
       <td valign='top' class='lefty'>
          <div class='postdetails'>
             Details
          </div>
       </td>
   </tr>
</table>

OUTPUT: See this jsFiddle for a demonstration.

Comments

[BoltClock]

No, you use border-spacing for cell spacing.

[James Johnson]

Pretty sure you can use margin too though, can't you?

[deathlock]

Yeap, I tried that. Margin unfortunately does not seem to work.

[BoltClock]

Margins don't quite apply to table cells the same way as border spacing does.

[James Johnson]

I thought I'd used margins before successfully, but border-spacing is more appropriate. Thanks for the tip, and I updated my answer accordingly.

[deathlock]

Sorry, I mistyped it in my question. I mean I tried border-spacing, and it does not work. It works when I target it for the TABLE though, but I don't want other TDs get affected.

[BoltClock]

If your HTML attributes are still there, that may be the issue. I don't really know how browsers handle presentational HTML attributes together with CSS, but I hear it's problematic.

[James Johnson]

@deathlock: BoltClock has a good point. Make sure you've removed the cellpadding and cellspacing attributes from the table.

[deathlock]

Yeap, I tried removing cellpadding and cellspacing, also tried the margin, but it still does not work. However by @DineshSwami example on using position:absolute it quite seem to work... though it results in breaking the overall layout. I tried position:relative and position:fixed but both still break the layout.

[James Johnson]

@deathlock: See my updated answer. I've provided the working code and a jsFiddle.

[deathlock]

I tried fiddling your fiddle, but it seems it is the padding which sets the distance, not the margin or border-spacing... I need it to be the margin because I need the distance to be outside of the border.

[James Johnson]

@deathlock: You're all set. Everything you need is in my answer.

[James Johnson]

@deathlock: Try again. I forgot to update the link to the fiddle. Trust me, you're all set. I've even attached a screenshot.

[w3uiguru]

@JamesJohnson you are givint the css: table.postable { border: 0 solid black; border-collapse: separate !important; border-spacing: 10px !important; } which is creating extra space for all the td. which is not requirement in question.

[deathlock]

This doesn't seem to achieve what I need... in the fiddle the margin is set by the border-spacing in the table.postable, which is the setting I do not want. Because it affects all td (everything, including td.lefty and the classless td). This is not what I wanted to achieve...

[James Johnson]

The fiddle just gives you the concept and the necessary CSS to accomplish the task. Modify it as needed until it works like you're expecting. This is the cleanest way to accomplish the task though, and it's pure CSS.

[deathlock]

Here is a quick rough sketch with MS Paint, I hope this explains what I need. i.imgur.com/o56CD.png In the overall layout there will be multiple rows (multiple TR). In the question I asked above it only shows one row. I need all columns (all TDs) to remain unchanged, except for .ritey. I want .ritey to have 10px margin around it (margin, not padding). Hope this explains! :)

[deathlock]

@JamesJohnson I think there is a misperception; Ive just added a pic, I hope this explains better than my English (I'm not a native speaker, sorry!)

[James Johnson]

@deathlock: So it looks like you only want spacing on lefty, is that correct? The rest of the borders should meet and collapse?

[deathlock]

Its class name actually is ritey (it has the wrong name, perhaps that's the one that caused confusion), but, you're correct. I want the left column/the left TD to have spacing, and the rest of the borders meet and collapse

[James Johnson]

@deathlock: Updated my answer. I think this is closer to what you want.

[deathlock]

Thanks, but... I think I forgot to mention that I have to have the border in the .ritey. Because the .postcolor is used for another styling...

[James Johnson]

Then wrap postcolor in another div and apply a border to that one. No offense intended here, but I've given you enough that you should be able to solve the rest of it with a little effort. You can't expect posters to answer your question AND put the bow on top for you.

[deathlock]

Yeah, sorry if I sound like requesting too much. But in the question I have explained that I cannot change the HTML structure since this is the work requirement. I already figured it to style the <div> inside the TD instead (including to style .postcolor), but I cannot do that because the reasons I have explained above. I'm not a total newbie that only capable to request stuff--I already did several workarounds before I asked this question, but I ultimately could not find any appropriate one so I have to ask it in here.

[deathlock]

If everything else fails I guess I should just use jQuery instead to add additional <div>. Though I'm aware that it is not the best practice and that does not achieve my goal to style the TD, not the <div> inside it. In any way, I thank you for your time to try to answer my question. I deeply apologize if there's anything that caused me to accidentally offend you.