Comment obtenir un arrondi de coin de table avec un corps de couleur différente avec le CSS?

J'ai besoin de faire le tableau suivant avec des coins arrondis et un corps de table
avec des couleurs différentes:

Comment obtenir un arrondi de coin de table avec un corps de couleur différente avec le CSS?

C'est ma table:

<table class="form_caja">
        <tr><th>Referidos</th></tr>

        <tr><td>Numero</td><td>Companhia</td><td>Nombre</td><td>Apellido</td><td>Email</td></tr>

            <tr><td>0976343344</td><td>PERSONAL</td><td>f</td><td>asd</td><td></td></tr>

            <tr><td>0992123123</td><td>CLARO</td><td>dA</td><td>de</td><td></td></tr>

            <tr><td>0963555457</td><td>CLARO</td><td>f</td><td>sdf</td><td></td></tr>

            <tr><td>0963555345</td><td>CLARO</td><td>e</td><td>de</td><td></td></tr>

    </table>

et c'est le style:

.form_caja {
    width: 524px;
    padding-top: 8px;
    padding-bottom: 15px;
    margin: 0 auto 20px auto;
    background: #446bb3;

     border-radius: 15px;

    -moz-border-radius: 15px;

    -webkit-border-radius: 15px;
    color: #446bb3;
}

c'est ce que je reçois à ce jour:

Comment obtenir un arrondi de coin de table avec un corps de couleur différente avec le CSS?

Comment dois-je faire pour obtenir un tableau semblable à celui que l'on désire?

Violon: http://jsfiddle.net/dQY9D/

OriginalL'auteur Lucas | 2012-11-06

  1. 5

    Modifier la structure HTML et effectuée ci-dessous CSS

    HTML

    <div class="form_caja">
  <table>
         <thead><tr><td></td></tr></thead>
         <tbody><tr><td></td></tr></tbody>
  </table>
</div>

    CSS

    form_caja {
        width: 524px;
        padding-top: 8px;
        padding-bottom: 15px;
        margin: 0 auto 20px auto;
        background-color: #446bb3;    
         border-radius: 15px;    
        -moz-border-radius: 15px;    
        -webkit-border-radius: 15px;
        color: #446bb3;
        padding:10px;
    }
    table { background-color : #fff; color : #453}
    thead { background-color: #446bb3  ; color :#fff; padding:4px; line-height:30px }
    tbody tr:nth-child(even) {background: #CCC}
    tbody tr:nth-child(odd) {background: #FFF}

    voir travail DÉMO et s'appliquent en fonction de votre exigence

    merci beaucoup diEcho!

    OriginalL'auteur diEcho

  2. 1

    Vous devez créer plus de classes à l'intérieur des balises, par exemple:

    .form_caja td {
   color:#ffffff;    
}

    Il y a déjà beaucoup de réponses sur ce thème.

    OriginalL'auteur Diodeus - James MacFarlane