Dos modelos de tablas diferentes

[cobolero_poseido]

Hola gente,

Lo que quiero es tener 2 tablas, pero que cada una tenga un estilo diferente, el problema que estoy teniendo es que las dos tablas se ven iguales. Defino lo siguiente para la tabla1:

Código PHP:

  .tabla1 {
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid; 
    border-color:#CCCCCC;     
    width:710px;    
    height:710px;
}
.tabla1 table, th, td {
    width: 1800px;
    border: 1px solid #D4E0EE;
    border-collapse: collapse;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #555;
}
.tabla1 td, th {
    padding: 4px;
    text-align: center;    
}
.tabla1 thead th {
    text-align: center;
    background: #E6EDF5;
    color: #4F76A3;
    font-size: 100% !important;
}
.tabla1 tbody th {
    font-weight: bold;
}

.tabla1 tbody tr { 
    background: #FCFDFE; 
}

.tabla1 tbody tr.odd { 
    background: #F7F9FC; 
}
.tabla1 tfoot th, tfoot td {
    font-size: 85%;
} 
   

Código PHP:

  <div class="tabla1">
<table>
    <thead>
        <tr>
            <th>Login</th>
            <th>Nombre</th>
            <th>Apellido</th>
        </tr>
    </thead>
    <tbody>    
        <tr>
               <td>Login</td>
               <td>Apellido</td>
               <td>Apellido</td>
        </tr>
</tbody>
</table>
</div> 
   

Para tabla2 tengo lo siguiente(a modo de ejemplo lo unico q cambio son los colores para ver si funciona):

Código PHP:

  .tabla2 {
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid; 
    border-color:#FFFFFF;     
    width:710px;    
    height:710px;
}
.tabla2 table, th, td {
    width: 1800px;
    border: 1px solid #FFFFFF;
    border-collapse: collapse;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #FFFFFF;
}
.tabla2 td, th {
    padding: 4px;
    text-align: center;    
}
.tabla2 thead th {
    text-align: center;
    background: #FFFFFF;
    color: #FFFFFF;
    font-size: 100% !important;
}
.tabla2 tbody th {
    font-weight: bold;
}

.tabla2 tbody tr { 
    background: #FFFFFF; 
}

.tabla2 tbody tr.odd { 
    background: #FFFFFF; 
}
.tabla2 tfoot th, tfoot td {
    font-size: 85%;
} 
   

Código PHP:

  <div class="tabla2">
<table>
    <thead>
        <tr>
            <th>Login</th>
            <th>Nombre</th>
            <th>Apellido</th>
        </tr>
    </thead>
    <tbody>    
        <tr>
               <td>Login</td>
               <td>Apellido</td>
               <td>Apellido</td>
        </tr>
</tbody>
</table>
</div> 
   

Cuando armo la tabla2, se ve igual que la tabla1, es decir no cambian los colores. Como tengo que hacer para que las dos se vean distintas?, muchas gracias