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;
}

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

Solution 2:

use cellspacing

<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: fiddle example

Solution 3:

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

Baca Juga

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
}

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

Html5 Info

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"