CSS horizontal table cell spacing: how?

Question

Hopefully this is an easy one but I have not found a solution. I want to put space between columns on a table.

Example

| Cell |<- space ->| Cell |         


        

Answer 1

How about giving each table cell a transparent border? I am pretty sure this will do it for you...

table td {
  border:solid 5x transparent;
}

And you can only apply it horizontally like so...

table td {
  border-left:solid 10px transparent;
}
table td:first-child {
  border-left:0;
}

Here's a complete working demo of what I believe you are trying to accomplish...

  
    
    
  
  
    

      

        
1
        
2
        
3
      
      

        
4
        
5
        
6
      
      

        
7
        
8
        
9
      
    
  

I do not believe IE6 supports the CSS :first-child, so here is a workaround for that...