How to prevent double border in tr > td element

Question

I would like to know if is possible to prevent double borders in a tr > td element. If I use border:1px solid #DDD then the first element will have all borders and then the second one too but because the first has a border-right and the second has a border-left then the borders are double and the same happens for the second tr where first has border-bottom and second has border-top. Any tips? I see this post but won't work for me because is for DIV and I'm using tables.

Answer 1

Start with:

border-collapse:collapse;

and then tune as necessary. Using the :first-child and :last-child pseudo selectors can be used to modify default styling on one end.

Answer 2

Instead of putting borders on the cells, set a background color on the table itself to the color you want the borders to be, then space the cells by 1px:

HTML:

​<table>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr>
    <tr>
        <td>Four</td>
        <td>Five</td>
        <td>Six</td>
    </tr>
</table>

CSS:

table {
    background: #ccc;
    border-spacing: 1px;
}
td {
    background: #fff;
    padding: 5px;
}

That will give you this:

Note that you have to set a background color on the cells themselves, too, otherwise the background color of the table will show through.

Answer 3

You're looking for border-collapse

The border-collapse CSS property selects a table's border model. This has a big influence on the look and style of the table cells.

Values are as such.

border-collapse:  collapse | separate | inherit