Es que lo unico que estas especificando unicamente a la tabla1 es lo siguiente:
Código:
table.tabla1 {
font-size:11px;
font-family: Arial, Helvetica, sans-serif;
border-collapse:collapse;
background:#e8eef7;
color:#000;
}
Lo demas lo estas asignando de forma GENERAL a las 2 tablas....
Por ejemplo esto:
Código:
tr th, tr td {border-bottom:1px solid #ccc; border-left:1px solid white}
tbody tr th {
width:auto;
height:90px;
}
tbody tr td {
height:1.7em;
text-align:left;
}
thead { background:#fff;}
tr th + td + td + td + td {
font-size:0.9em;
}
tr.odd th + td + td + td + td {
font-size:11px;
background:none;
}
tfoot th, tfoot td {
height:105px;
font-weight:bold;
height:2.0em;
}
tfoot th{
height:102px;
}
tfoot td {height:102px;
}
Se le atribuye a las 2 tablas porque no estas especificando a cual darle, sino que estas dandole propiedades CSS a las etiquetas de las tablas en general... por lo tanto estas modificando a todos los tfoot, td, th, tr y tbody que hay en el html, sin importar la clase que sean, etc.
A todo esto, el CSS esta recontra desprolijo, pero lo peor es que hay cosas que estan de mas...