How to set cellspacing in tables only horizontally

html css html-table cellspacing
Borut Flis picture Borut Flis · Oct 19, 2012 · Viewed 28.3k times · Source

I would like to style the table written below.

<table border="1"   cellspacing="10">
  <tr>
    <th>Month</th>
    <th>Savings</th>  
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

The problem is that cellspacing sets the space between cells both horizontaly and verticaly, I would like it to be done only horizontaly. Is there a way to do this.

Answer

Jukka K. Korpela picture Jukka K. Korpela · Oct 19, 2012

Use the border-spacing CSS property on the table. Browser support is fairly good (excluding mainly IE up to and including IE 7). Example:

table { border-spacing: 10px 0; }

Related questions

Cannot put margin on <td> tag with neither CSS nor cellspacing attribute

For whatever reason, I have been unable to get any table cells to have margin between them. I want the table cells to have a grey background colour (over a white page background) so it looks like tiles with white …

Read More
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 …

Read More
Set cellpadding and cellspacing in CSS?

In an HTML table, the cellpadding and cellspacing can be set like this: <table cellspacing="1" cellpadding="1"> How can the same be accomplished using CSS?

Read More