Estilizar tabela com CSS específico

[FabianoSouza 5]

Tenho um CSS específico para estilizar tabelas:

table {
width: 100%;
border-collapse: collapse;
}


th {
background-color:#CCC;
font-size: 12px;
color:#484848;
padding-left:4px;
padding-right:4px;
border-bottom:solid 1px #CCC;
height:26px;
padding-right:5px;

	}
tr:nth-child(odd) {
		background-color:#F3F3F3;
}

tr:nth-child(even) {
		background-color:#FFF;

}

tr, td {
height:26px;
padding-left:4px;
padding-right:2px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
white-space:nowrap;
border-bottom:solid 1px #E1E1E1;
}
tr:hover {
background-color:#00D8CC;
cursor:pointer; color:#FFF;
}

 

 

Da forma como está o estilo acima acaba sendo aplicado em qualquer tabela que estiver na página porque o CSS estiliza diretamente as tags HTML.

 

Porém, numa certa página tenho duas tabelas. Uma é o grid de dados, a outra é uma tabela "complementar".

Quero aplicar a esta tabela complementar um estilo específico. Como faço?

 

Help por caridade.

[Bergs 53]

pesquise sobre os atributos class e id com eles você vai definir áreas(tags) específicas para estilizar, dúvidas estamos aí para ajudá-lo.

[Gilberto Jr 26]

Nessa sua outra tabela basta você colocar um ID ou CLASS nela e fazer a configuração para a sua ID ou CLASS que vai da certo.

 

#id_table{
       width: 80%;
       border-collapse: collapse;
}


#id_table th {
       background-color:#CCC;
       font-size: 12px;
       color:#484848;
       padding-left:4px;
       padding-right:4px;
       border-bottom:solid 1px #CCC;
       height:26px;
       padding-right:5px;

               }
#id_table tr:nth-child(odd) {
                       background-color:#f2f2f2;
}

#id_table tr:nth-child(even) {
                       background-color:#000;

}

#id_table tr, td {
       height:26px;
       padding-left:4px;
       padding-right:2px;
       font-family:Verdana, Geneva, sans-serif;
       font-size:12px;
       white-space:nowrap;
       border-bottom:solid 1px #E1E1E1;
       }
#id_table tr:hover {
       background-color:#00D8CC;
       cursor:pointer; color:#FFF;

 

fazendo desta forma você vai conseguir.

[graviola 1]

A solução do Gilberto é correta!

Tive o mesmo problema ao fazer isso para 'buttons', é bom sempre utilizar os ids e as classes correspondentes de cada componente!

 

Abraços

[FabianoSouza 5]

OK pessoal. Vou testar a solução do Gilberto.

 

 

Obrigado a todos.

[Gilberto Jr 26]

A solução que passei deu certo?

[angelorubin 142]

Boa tarde,

 

A diferença entre classes e identificadores é basicamente uma. Identificadores são ÚNICOS, ou seja, só podem ser usados somente uma vez em uma página HTML. Já as classes podem ser utilizadas multiplas vezes no mesmo documento.