CODEWITHSUNDEEP
htmlcsshtml-tablecellspacing
deathlock
deathlock

Reputation: 2837

Set CSS cell-spacing for TD

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.

Upvotes: 2

Views: 21911

Answers (3)

Yash Kharva
Yash Kharva

Reputation: 1

.demo 
{
color:red;
background-color:skyblue;
border:2px solid black;
margin-left:5px;
}
<h1 class="demo">Yash</h1>

.demo 
{
color:red;
background-color:skyblue;
border:2px solid black;
margin-left:5px;
}
<h1 class="demo">Yash</h1>

<!-- begin snippet: js hide: false console: true babel: false -->

Upvotes: 0

w3uiguru
w3uiguru

Reputation: 5895

See fiddle for code and demo

fiddle: http://jsfiddle.net/kDKEw/2/

demo: http://jsfiddle.net/kDKEw/2/embedded/result/

HTML:

<table cellspacing="1" cellpadding="3" border="1" width="100%" class="postable">
  <tbody><tr>
  <td valign="middle" colspan="2" class="row4 uname">
  <div class="name">
   <a href="#">Guest</a>
  </div>
  </td>
  </tr><tr style="height: 36px;">
  <td width="100%" valign="top" class="ritey" style="width: 90%; position: absolute; margin: 4px;">
        <div class="postcolor">
         Post content
        </div>
  </td><td valign="top" class="lefty" style="float: right; width: 6%;">
    <div class="postdetails">
    Details
</div>
  </td>
  </tr>
</tbody>
</table>

SS:

enter image description here

Updated Fiddle as per image illustration ( https://i.sstatic.net/YBXCK.png ): given by deathlock

Fiddle: http://jsfiddle.net/7xfxF/1/

Demo: http://jsfiddle.net/7xfxF/1/embedded/result/

SS:

enter image description here

Upvotes: 3

James Johnson
James Johnson

Reputation: 46047

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: enter image description here See this jsFiddle for a demonstration.

Upvotes: 1

Related Questions