Color Entire Rows In A Table Without A Border

Question

is it possible to color entire rows in an html table without being a 'break' or gap for the border? So far I have this table:

Solution 1:

Sure, add a border-collapse rule:

table {
    border-collapse:collapse;
}

jsFiddle example

table {
    border-collapse:collapse;
}

<tablewidth="500px"><trbgcolor="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><trbgcolor="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><trbgcolor="mistyrose"><td>Objetivo Cupcake Perfecto</td><td>Alma Obregón</td><td>Español</td></tr></table>

Solution 2:

use cellspacing

<tablewidth="500px"cellspacing=0><trbgcolor="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><trbgcolor="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><trbgcolor="mistyrose"><td>Objetivo Cupcake Perfecto</td><td>Alma Obregón</td><td>Español</td></tr>

see fiddle: fiddle example

Solution 3:

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

table {
 border-collapse:collapse;
}

..or:

<table cellspacing="0">

Have fun!

Solution 4:

Use border-spacing property and set it to 0 so that the gap is removed.

table {
  border-spacing: 0;   
}

Demo:

table {
  border-spacing: 0
}

<tablewidth="500px"><trbgcolor="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><trbgcolor="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><trbgcolor="mistyrose"><td>Objetivo Cupcake Perfecto</td><td>Alma Obregón</td><td>Español</td></tr></table>

Code Html5

Color Entire Rows In A Table Without A Border

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Color Entire Rows In A Table Without A Border"