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

You could also consider using a series of fixed width divs floated left with margins. This might give you a bit more control over the element styling.

.row div {
     margin-right: 10px;
     float: left;
     width: 50px;
}

    <div class="row">
        <div>Cell One</div>
        <div>Cell Two</div>
        <div>Cell Three</div>
    </div>

Answer 2

try using cols

example

<table>
    <col style="padding-right:20px;" />
    <col style="padding-right:30px;" />
    <col />
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

cols also support classes :)

hope this helps

Darko

EDIT: To clarify a col is an element declared at the top of the table to influence entire columns. The first col element will influence the first column, the second col = second column and so on. They can be grouped in colgroups if you wish to assign the same style to more than one column.

EDIT2: After some more research it turns out that the only reliable styles you can set on a col element are:

• border
• background
• width
• visibility

No margin or padding. Bugger! Would setting the width of the columns explicitly solve your problem?

Answer 3

The Josh's answer is quite good, but in my opinion needlessly complicated. When you set the table borders to "hidden" and collapse mode to "collapse", the borders on the outer edges of columns will be eliminated, just as required.

Working example:

Stylesheet:

table#my_table  {
    border-collapse: collapse;
    border-style: hidden;
}

table#my_table td {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

HTML:

<table id="my_table">
   <tr>
     <td>A1</td>
     <td>A2</td>
     <td>A3</td>
   </tr>
   <tr>
     <td>B1</td>
     <td>B2</td>
     <td>B3</td>
   </tr>         
</table>