Color of whole rows in a borderless table

Question

Is it possible to color entire rows in an html table without a “break” or space for the border?

So far I have this table:

<table width="500px"> <tr bgcolor="pink"> <td>Nombre blog</td> <td>Autora</td> <td>Idioma</td> </tr> <tr> <td>The Blonde Salad</td> <td>Chiara Ferragni</td> <td>Italiano</td> </tr> <tr bgcolor="mistyrose"> <td>The Pioneer Woman</td> <td>Ree Drummond</td> <td>Inglés</td> </tr> <tr> <td>La Tartine Gourmande</td> <td>Béatrice Peltre</td> <td>Francés</td> </tr> <tr bgcolor="mistyrose"> <td>Objetivo Cupcake Perfecto</td> <td>Alma Obregón</td> <td>Español</td> </tr> </table> 

What you can see in this fiddle: http://jsfiddle.net/ncsmzmch/

As you can see, there is a white gap between the columns. If I placed a border or even a border collapsed, this gap will obviously disappear, because it is filled with a line (border).

But I want to leave the lines colored, but all on one line, without spaces and without borders.

Could this be achieved? Thanks!

Answer 1

Of course, add a border-collapse rule:

 table { border-collapse:collapse; } 

JsFiddle example

 table { border-collapse:collapse; } 

 <table width="500px"> <tr bgcolor="pink"> <td>Nombre blog</td> <td>Autora</td> <td>Idioma</td> </tr> <tr> <td>The Blonde Salad</td> <td>Chiara Ferragni</td> <td>Italiano</td> </tr> <tr bgcolor="mistyrose"> <td>The Pioneer Woman</td> <td>Ree Drummond</td> <td>Inglés</td> </tr> <tr> <td>La Tartine Gourmande</td> <td>Béatrice Peltre</td> <td>Francés</td> </tr> <tr bgcolor="mistyrose"> <td>Objetivo Cupcake Perfecto</td> <td>Alma Obregón</td> <td>Español</td> </tr> </table> 

Answer 2

use cellpacing

 <table width="500px" cellspacing=0> <tr bgcolor="pink"> <td>Nombre blog</td> <td>Autora</td> <td>Idioma</td> </tr> <tr> <td>The Blonde Salad</td> <td>Chiara Ferragni</td> <td>Italiano</td> </tr> <tr bgcolor="mistyrose"> <td>The Pioneer Woman</td> <td>Ree Drummond</td> <td>Inglés</td> </tr> <tr> <td>La Tartine Gourmande</td> <td>Béatrice Peltre</td> <td>Francés</td> </tr> <tr bgcolor="mistyrose"> <td>Objetivo Cupcake Perfecto</td> <td>Alma Obregón</td> <td>Español</td> </tr> 

see fiddle: example script

Answer 3

Yeap, you can use one of two ways: either cellpacing or border-collapse :

 table { border-collapse:collapse; } 

.. or:

 <table cellspacing="0"> 

Good luck

Answer 4

Use the border-spacing property and set it to 0 to remove the space.

 table { border-spacing: 0; } 

Demo:

 table { border-spacing: 0 } 

 <table width="500px"> <tr bgcolor="pink"> <td>Nombre blog</td> <td>Autora</td> <td>Idioma</td> </tr> <tr> <td>The Blonde Salad</td> <td>Chiara Ferragni</td> <td>Italiano</td> </tr> <tr bgcolor="mistyrose"> <td>The Pioneer Woman</td> <td>Ree Drummond</td> <td>Inglés</td> </tr> <tr> <td>La Tartine Gourmande</td> <td>Béatrice Peltre</td> <td>Francés</td> </tr> <tr bgcolor="mistyrose"> <td>Objetivo Cupcake Perfecto</td> <td>Alma Obregón</td> <td>Español</td> </tr> </table>