deathlock deathlock - 1 year ago 107
CSS Question

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

). 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
. I want
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'>
<td valign='middle' class='row4 uname' colspan='2'>
<div class='name'>
<a href='#'>Guest</a>
<td width='100%' valign='top' class='ritey'>
<div class='postcolor'>
Post content
</td><td valign='top' class='lefty'>
<div class='postdetails'>

Any help is really appreciated.

Answer Source

See fiddle for code and demo




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


enter image description here

Updated Fiddle as per image illustration ( ): given by deathlock




enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download