CODEWITHSUNDEEP
cssborder
ReynierPM
ReynierPM

Reputation: 18680

How to prevent double border in tr > td element

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.

Upvotes: 10

Views: 24583

Answers (4)

Nestor Mancilla
Nestor Mancilla

Reputation: 148

For those of you who previous answers didn't work, I used table {border-spacing: -2px;} (works for mPDF)

Upvotes: 0

daGUY
daGUY

Reputation: 28773

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:

cellspacing example

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

Upvotes: 8

Matt Whipple
Matt Whipple

Reputation: 7134

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.

Upvotes: 20

Ryan Kinal
Ryan Kinal

Reputation: 17732

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

Upvotes: 6

Related Questions