Color entire rows in a table without a border

前端 未结 4 1541
南方客
南方客 2021-01-18 05:09

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:

相关标签:
4条回答
  • 2021-01-18 05:46

    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>

    0 讨论(0)
  • 2021-01-18 05:51

    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

    0 讨论(0)
  • 2021-01-18 06:02

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

    table {
     border-collapse:collapse;
    }
    

    ..or:

    <table cellspacing="0">
    

    Have fun!

    0 讨论(0)
  • 2021-01-18 06:05

    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>

    0 讨论(0)
提交回复
热议问题