Search code examples
cssborder

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.


Solution

  • 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.