How to prevent double border in tr> td element

Question

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

Answer 1

Start with:

border-collapse:collapse;

and then tune as necessary. Using the :first-child and :last-child pseudo :last-child can be used to change the default style at one end.

Answer 2

Are you looking for border-collapse

A border collapse CSS property selects a table border model. This has a big impact on the appearance and style of table cells.

Values ​​as such.

 border-collapse: collapse | separate | inherit 

Answer 3

Instead of placing borders in cells, set the background color in the table itself to the color you want the borders to be, and then select 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; } 

This will give you the following:

Please note that you also need to set the background color on the cells themselves, otherwise the background color of the table will be displayed.