CODEWITHSUNDEEP
htmlcsshtml-table
Lucas
Lucas

Reputation: 1279

How to get a rounded corner table with a body in different color with CSS?

I need to make the following table with rounded corner and a table body with different color:

enter image description here

This is my 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>

and this is the 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;
}

this is what I get so far:

enter image description here

How should I do to get a table like the desired one?

Fiddle: http://jsfiddle.net/dQY9D/

Upvotes: 4

Views: 26339

Answers (2)

xkeshav
xkeshav

Reputation: 54050

Change structure of HTML and aplly below 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}

​

see working DEMO and apply as per your requirement

Upvotes: 5

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

You need to create more classes for the inner tags, for example:

.form_caja td {
   color:#ffffff;    
}

​There are already many answers covering this topic.

Upvotes: 1

Related Questions