Cellspacing in CSS - Solved!

[Debbie-Leigh]

Hi,

 

At long last, I've managed to figure out how to emulate the HTML cellspacing attribute in CSS. So I thought that I'd post it here so everyone can use it.

 

Here's the code:

.cellspacing td {
border-right : 3px solid #FFF;
}
.cellspacing td:last-child {
border-right : 0px;
}
.cellspacing th {
border-right : 3px solid #FFF;
}
.cellspacing th:last-child {
border-right : 0px;
}

 

Just add the cellspacing class to a table tag and it creates a white 3px border between each column throughout the table.

 

It's a shame the CSS designers haven't made this easier by having a proper built-in cellspacing attribute, but until they do, this is the next best thing, I guess.

 

Enjoy.

 

Debbie

 

[cssfreakie]

Another way you might want to try out is the following.

 

<style type="text/css">
.gorilla td, .gorilla th{display:inline-block; padding-right:5px;}
</style>

        <table class="gorilla">
            <thead>
                <tr><th>a</th><th>b</th><th>c</th></tr>
            <tbody>
                <tr><td>a</td><td>b</td><td>c</td></tr>
                <tr><td>a</td><td>b</td><td>c</td></tr>
                <tr><td>a</td><td>b</td><td>c</td></tr>
                <tr><td>a</td><td>b</td><td>c</td></tr>
                <tr><td>a</td><td>b</td><td>c</td></tr>
        </table>

By displaying them as block, we can give them some nice dimensions, including padding etc.

 

If you want to target the last column you might also want to have a look at something called <colgroup> 's