2

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
deathlock
  • 2,756
  • 5
  • 27
  • 48
  • If this is a onetime only change, why not embed it in in the td? `cellspacing="0"`. You're already doing this with width and valign. – Khan Mar 30 '12 at 15:52
  • Dear see my answer and let me know if i am lagging some where. – w3uiguru Mar 30 '12 at 15:58
  • 1
    What do you mean you are forced to use a table for layout? There is nothing a table can do for layout that css can't. – iambriansreed Mar 30 '12 at 16:00
  • @Jeff: that seems to be the problem: even embedding it in the TD won't make it work too. – deathlock Mar 30 '12 at 16:02
  • Dinesh: OK :) | @iambriansreed: this is a template I cannot change because of work requirements. I know that it is better to use DIV, but I in any way cannot change it to DIV. So I have to use TABLE in any case. – deathlock Mar 30 '12 at 16:03
  • @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. Is this you requirement Dear? – w3uiguru Mar 30 '12 at 16:54
  • Dear see my updated answer with new fiddle and in this your desired layout is explained. Please have a look and let me know if you face any issues or anything else required so i can workout ASAP. – w3uiguru Mar 31 '12 at 03:38

2 Answers2

3

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.stack.imgur.com/YBXCK.png ): given by deathlock

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

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

SS:

enter image description here

w3uiguru
  • 5,864
  • 2
  • 21
  • 25
  • Why are you floating a table cell? – James Johnson Mar 30 '12 at 16:07
  • Because once the margin is set to ritey. and the question is only space on ritey so to set the Details td at its place i used float. – w3uiguru Mar 30 '12 at 16:10
  • Ok, this seems progressing... I think the `position: absolute;` is a determinant factor here, because when I remove it, the margin stops working. However, unfortunately adding the `position:absolute` seems to break the overall layout... – deathlock Mar 30 '12 at 16:15
  • what is you exact requirement tell us, so we can help you achieve your desired layout. – w3uiguru Mar 30 '12 at 16:26
  • I have added an illustration, I hope this explains! :) – deathlock Mar 30 '12 at 18:01
  • Dear see my updated answer with new fiddle and in this your desired layout is explained. Please have a look and let me know if you face any issues or anything else required so i can workout ASAP. – w3uiguru Mar 31 '12 at 03:38
  • Don't you think I kind of had it covered? You updated with more or less the same answer. And floating a table cell doesn't really make sense. The column already gives you what you need fo alignment, or should if the CSS is done correctly. – James Johnson Mar 31 '12 at 03:49
  • @james Johnson previously i float td as per requirement to give the space to ritey column and now in my updated fiddle i have created the html structure based on image illustration. So where is the problem i am getting the exact layout and output that deathlock wants. there is a difference in yours and mine approaches. see updated fiddle. – w3uiguru Mar 31 '12 at 04:48
  • I see, so this adds an additional `table` inside the `td`? I may conclude that styling the `TD` to have different `border-spacing` is just completely impossible then. This solution certainly works (as so with @JamesJohnson 's solution), but it needs additional HTML, which is the `table`... thanks for the help! I guess I have to resort with jQuery since I'm not able to/not in position to modify the HTML structure. – deathlock Mar 31 '12 at 10:31
1

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.

James Johnson
  • 45,496
  • 8
  • 73
  • 110
  • 1
    No, you use `border-spacing` for cell spacing. – BoltClock Mar 30 '12 at 15:51
  • Pretty sure you can use margin too though, can't you? – James Johnson Mar 30 '12 at 15:52
  • Yeap, I tried that. Margin unfortunately does not seem to work. – deathlock Mar 30 '12 at 15:53
  • Margins don't quite apply to table cells the same way as border spacing does. – BoltClock Mar 30 '12 at 15:54
  • I thought I'd used margins before successfully, but `border-spacing` is more appropriate. Thanks for the tip, and I updated my answer accordingly. – James Johnson Mar 30 '12 at 15:57
  • 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. – deathlock Mar 30 '12 at 15:58
  • 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. – BoltClock Mar 30 '12 at 15:59
  • @deathlock: BoltClock has a good point. Make sure you've removed the `cellpadding` and `cellspacing` attributes from the table. – James Johnson Mar 30 '12 at 16:02
  • 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. – deathlock Mar 30 '12 at 16:17
  • @deathlock: See my updated answer. I've provided the working code and a jsFiddle. – James Johnson Mar 30 '12 at 16:25
  • 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. – deathlock Mar 30 '12 at 16:35
  • @deathlock: You're all set. Everything you need is in my answer. – James Johnson Mar 30 '12 at 16:43
  • @deathlock: Try again. I forgot to update the link to the fiddle. Trust me, you're all set. I've even attached a screenshot. – James Johnson Mar 30 '12 at 16:44
  • @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. – w3uiguru Mar 30 '12 at 16:48
  • 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... – deathlock Mar 30 '12 at 17:42
  • 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. – James Johnson Mar 30 '12 at 17:48
  • Here is a quick rough sketch with MS Paint, I hope this explains what I need. http://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 Mar 30 '12 at 17:53
  • @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!) – deathlock Mar 30 '12 at 17:54
  • @deathlock: So it looks like you only want spacing on `lefty`, is that correct? The rest of the borders should meet and collapse? – James Johnson Mar 30 '12 at 17:55
  • 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 – deathlock Mar 30 '12 at 17:59
  • @deathlock: Updated my answer. I think this is closer to what you want. – James Johnson Mar 30 '12 at 18:05
  • 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... – deathlock Mar 30 '12 at 18:29
  • 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. – James Johnson Mar 30 '12 at 18:51
  • 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 `
    ` 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 Mar 31 '12 at 10:05
  • If everything else fails I guess I should just use jQuery instead to add additional `
    `. Though I'm aware that it is not the best practice and that does not achieve my goal to style the TD, _not_ the `
    ` 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.
     – deathlock Mar 31 '12 at 10:08