estilizando tabela e linhas

[felipe maricato moura 0]

Olá pessoal estou tentando estilizar uma tabela assim como suas linhas porém para não ter que setar o atributo class em todas as linhas <td></td> eu estou usando este método css

 

table#tableFormulario {
   background:#D1DCDF;
   border:1px solid;
   border-collapse:collapse;
}

   table#tableFormulario thead th, tfoot th {
       text-align:center;
   }

   table#tableFormulario thead th, tfoot th {
       background:#305761;
       font-weight:700;
       padding-top:3px;
   }

   table#tableFormulario tbody th, tbody td {
       text-align:left;
       vertical-align:top;
   }

   /*table#tableFormulario  tbody tr:hover {
           background:#88839E;
       }
       */


   table#tableFormulario  td, th {
       border:1px dotted;
       padding:5px;
   }

/*CORES*/

table#tableFormulario  table, thead th, tfoot th, tbody tr:hover, td, th {
   border-color:#003D5F;
}

table#tableFormulario  thead th, tfoot th, tbody tr:hover, tbody tr.par:hover {
   /*color:#FFF;*/
}

 

Desta mandeira utilizando table#id_da_tabela + td, th eu consigo extender o estilo para todas as linhas ta tabela, meu problema é que tabelas que não tem o id='tableFormulario' também estão pegando es estilo isso é um problema pois gostaria de ter uma classes de estilo diferente para cada tabela e hoje está misturando.

 

Abaixo o código da tabela

 

   <table id="tableFormulario" border="0" cellpadding="0" cellspacing="0" style="width:400px; margin:0 auto">

       <thead>
           <tr>            
               <th>Cabeçalho</th>
               <th>bbb</th>

           </tr>
       </thead>
       <tbody>
           <tr>            
               <td>linha1</td>
               <td>xxx</td>            
           </tr>
           <tr>

               <td>linha 2 </td>
               <td>aaaa</td>

           </tr>
       </tbody>
   </table>

 

Alguem sabe como resolver isso?

[Apulko 3]

Tire fora esse table da frente

 

"table#tableFormulario..."

[felipe maricato moura 0]

Tire fora esse table da frente

 

"table#tableFormulario..."

 

eu já fiz isso porém o <th></th> da segunda tabela continua herdando os código do estilo mesmo não tendo a class para exemplificar vou enviar uma imagem

 

Como isso é possível.

 

E colocar os códigos alterados

 

IMAGEM

 

 

 

CSS

/*TABELA FORMULARIO*/

.tableFormulario {
   background:#D1DCDF;
   border:1px solid;
   border-collapse:collapse;
}

   .tableFormulario thead th, tfoot th {
       text-align:center;
   }

   .tableFormulario thead th, tfoot th {
       background:#305761;
       font-weight:700;
       padding-top:3px;
   }

   .tableFormulario tbody th, tbody td {
       text-align:left;
       vertical-align:top;
   }

   .tableFormulario  tbody tr:hover {
           background:#88839E;
       }



   .tableFormulario  td, th {
       border:1px dotted;
       padding:5px;
   }

/*CORES*/

.tableFormulario  table, thead th, tfoot th, tbody tr:hover, td, th {
   border-color:#003D5F;
}

.tableFormulario  thead th, tfoot th, tbody tr:hover, tbody tr.par:hover {
   color:#FFF;
}

TABELAS

<table class="tableFormulario" border="0" cellpadding="0" cellspacing="0" style="width:400px; margin:0 auto">

       <thead>
           <tr>            
               <th>Cabeçalho</th>
               <th>bbb</th>

           </tr>
       </thead>
       <tbody>
           <tr>            
               <td>linha1</td>
               <td>xxx</td>            
           </tr>
           <tr>

               <td>linha 2 </td>
               <td>aaaa</td>

           </tr>
       </tbody>
   </table>

   <p> </p>

   <table border="0" cellpadding="0" cellspacing="0" style="width:400px; margin:0 auto">

       <thead>
           <tr>            
               <th>2 Cabeçalho</th>
               <th>bbb</th>

           </tr>
       </thead>

       <tbody>
           <tr>            
               <td>2 linha1</td>
               <td>xxx</td>            
           </tr>
           <tr>

               <td>2 linha 2 </td>
               <td>aaaa</td>

           </tr>
       </tbody>
   </table>

[ricardo_mc 19]

Repare no seu código.

 

Ex:

table#tableFormulario thead th, tfoot th {
  text-align:center;
}

 

Quando você coloca o código: table#tableFormulario thead th, tfoot th

 

Repare que você separou um tfoot th por vírgula, quando você faz isso, diz que o TH dentro de um TFOOT vai receber aquele estilo. Se você quer limitar apenas as tabelas com ID, precisa declarar assim:

 

table#tableFormulario thead th, table#tableFormulario tfoot th

 

Aplique esse conceito em todo o CSS que você fez e verá que dá certo.

[felipe maricato moura 0]

Repare no seu código.

 

Ex:

table#tableFormulario thead th, tfoot th {
  text-align:center;
}

 

Quando você coloca o código: table#tableFormulario thead th, tfoot th

 

Repare que você separou um tfoot th por vírgula, quando você faz isso, diz que o TH dentro de um TFOOT vai receber aquele estilo. Se você quer limitar apenas as tabelas com ID, precisa declarar assim:

 

table#tableFormulario thead th, table#tableFormulario tfoot th

 

Aplique esse conceito em todo o CSS que você fez e verá que dá certo.

 

 

Oi Ricardo, obrigado pela sua resposta eu fiz o teste e deu certo só vou retomar aqui para quem está lendo pegar legal também.

 

Quando vocês faz a seguinte declaração de classe no CSS

 

   .tableFormulario  td, .tableFormulario th {
       border:1px dotted;
       padding:5px;
   }

 

Você está dizendo para o navegador que td e th pertencem a mesma classe de estilos .tableFormulario desta forma restringindo a estilizaçãos para tags com o atributo class="tableFormulario"

 

porém se vocês declara assim

 

   .tableFormulario  td, th {
       border:1px dotted;
       padding:5px;
   }

 

Você está dizendo ao navegar que td deve estar vinculada a classe .tableFormulario porém os th fica estendido a todas as as th que estiverem no código.

 

Então é isso, muito obrigado a todos pelas respostas.

 

Só para deixar postada a solução final

 

CSS

.tabForm {
   background:#D1DCDF;
   border:1px solid;
   border-collapse:collapse;
}

   .tabForm thead th, .tabForm tfoot th {
       text-align:center;
   }

   .tabForm thead th, .tabForm tfoot th {
       background:#305761;
       font-weight:700;
       padding-top:3px;
   }

   .tabForm tbody th, .tabForm tbody td {
       text-align:left;
       vertical-align:top;
   }

   .tabForm td, .tabForm th {
       border:5px solid white;
       padding:5px;
   }

/*CORES*/

.tabForm  table, .tabForm thead th, .tabForm tfoot th, .tabForm tbody tr:hover, .tabForm td, .tabForm th {
   border-color:white;
}

 

TABLE

    <table class="tabForm" border="0" cellpadding="0" cellspacing="0" style="width:400px; margin:0 auto">

       <thead >
           <tr>            
               <th >Cabeçalho</th>
               <th>bbb</th>

           </tr>
       </thead>
       <tbody >
           <tr>            
               <td >linha1</td>
               <td>xxx</td>            
           </tr>
           <tr>

               <td>linha 2 </td>
               <td>aaaa</td>

           </tr>
       </tbody>
   </table>

 

Flw