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

[KnowDemon]

Creo que el problema radica en los selectores siguientes:

.tabla1 table, th, td
.tabla1 td, th
.tabla1 tfoot th, tfoot td
.tabla2 table, th, td
.tabla2 td, th
.tabla2 tfoot th, tfoot td

Si te das cuenta, defines más de una vez las reglas de estilo de los mismos elementos sin distinguir entre tablas. Por ejemplo, los selectores:

.tabla1 table, th, td

.tabla2 table, th, td

Escogen nuevamente los th y los td. No debería ser algo como:

.tabla1 table, .table1 th, .table1 td

.tabla2 table, .table2 th, .table2 td

de forma que no entren en conflicto.

[cobolero_poseido]

Fenomeno!!! muchas gracias, era eso