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


Tags: html,css,table

Problem :

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?

Thanks in advance! Fiddle: http://jsfiddle.net/dQY9D/



Solution :

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


    CSS Howto..

    How to place two divs next to each other -HTML/CSS

    how to remove space in TR and TD

    How to I bring my sticky navbar in front of the contents on my page?

    How to make a moving dashed border with CSS?

    how do you create tags like stackoverflow with text styling

    Webpack bundle does not show css

    How to avoid line breaks after “:before” in CSS

    How to achieve parallax behind horizontal bars while scrolling

    How to write css for a div under a div which specific id which is itself under a div with specific class?

    How to force a div to scale at 100% width of the current windows Browser

    How can I select second element and after that in CSS?

    How do I get CSS table columns to line up?

    How to Identify which div in a sequence with the same class was clicked

    css how to make text align bottom?

    How do I organize imports in Compass/Blueprint?

    Modernizr: IE10 & Flexbox: How to get IE10 flexbox detected

    How to make css styles in the document body only specific to a div

    How to remove all the borders of a selectbox?

    How to create two containers within a row that responsively keep equal heights?

    How to fill a rectange from center html , css

    How to set up css hierarchies

    How can I use Rspec to check for the absence of certain CSS classes?

    How to scale div from jquery css

    How to get user submission to post to page

    How to remove the background in a slick carousel?

    How to align images and unordered list

    How to disable auto genrated css in media folder at runtime Magento?

    CSS causing red frame around lightbox image - how to remove?

    How to eliminate the margin of div boxes

    How to apply css to iframe content? [closed]