4

次の丸い角のテーブルと異なる色のテーブル本体を作成する必要があります。

ここに画像の説明を入力してください

これは私のテーブルです：

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

これがスタイルです：

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

これは私がこれまでに得たものです：

ここに画像の説明を入力してください

希望のテーブルを作成するにはどうすればよいですか？

フィドル： http： //jsfiddle.net/dQY9D/

4

2 に答える 2

5

HTMLの構造を変更し、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}

</ p>

要件に従って参照working DEMOして適用します

于 2012-11-06T03:12:17.180 に答える
1

次に、内部タグ用にさらにクラスを作成する必要があります。

.form_caja td {
   color:#ffffff;    
}

このトピックをカバーする多くの回答がすでにあります。

于 2012-11-06T03:00:29.043 に答える