Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

TeixeiraRamos

Tabela Zebrada IE

Recommended Posts

Salve, Salve,

Postei no forum de CSS, um tópico como fazer com que a minha tabela ficasse "Zebrada" tambem no IE.

Um colaborador me ajudou informando:

 

Essa tabela é gerada por alguma linguagem dinâmica? PHP, ASP, Javascript?

Se sim, gere 2 classes diferentes para essas linhas. Exemplo:

 

For($i = 0; i < 10; i++){
       $class = $i % 2 == 0 ? 'even' : 'odd';
       echo '<tr class="'.$class.'">
       ...
       </tr>';
}

 

No CSS

.tabela tbody tr:nth-child(odd),
.tabela tbody tr.odd {
  background:#CCC;
}

 

Com relação a inclusão na CSS (.tabela...) não tive problema mas o "For..." não sei como incluir no código ASP.

Diante disso fui orientado:

 

O código para gerar duas classes você deve inserir na linguagem de programação que esta utilizando, no caso o ASP.

No fórum de ASP o pessoal pode te ajudar melhor :thumbsup:

 

A página que tem a tabela que não fica zebrada no IE é essa:

http://www.informaca...com.br/logs.asp

 

A CSS é log.css

 

Obrigado gente!

Compartilhar este post


Link para o post
Compartilhar em outros sites

olha este exemplo:

 

corLinha = "#FFFFFF"
do while x < total 

  if corLinha = "#FFFFFF" then
  cor = "#D5C69B"
  else
  cor = "#FFFFFF"
  end if
  %>
       <td height="30" class="Font_Normal" bgcolor="<%=cor%>"><div align="center"><%=vlr("data")%></div></td>

 

e você pode também usar uma JQuery para isso, conforme abaixo:

 

<script type="text/javascript">
//Código jQuery para adicionar o efeito zebra na tabela, em anexo está o exemplo completo!
$(document).ready(function() {
  $('table tbody tr:odd').addClass('zebraUm');
  $('table tbody tr:even').addClass('zebraDois');
});
</script>

 

O código é bem simples, consiste em ter uma tabela com as tags thead e tbody, onde thead vai ser o cabeçalho da tabela e tbody o corpo da tabela, e no caso vamos ter 2 estilos, zebraUm e zebraDois que vão ser para variar os cores da linha. Para a utilização desse código faz-se necessário importar a biblioteca jquery.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Xanburzum,

Obrigado peja ajuda mas executei o primeiro exemplo embora nunca tenha feito nada desse tipo.

Primeiro na minha "td" já tenho uma class da CSS que funciona bem no Mozila. Coloquei a class do seu exemplo e não deu certo.

Nesse seu primeiro exemplo no início tem que colocar algo mais. Correto? Eu tentei, colocando "function font_normal()" mas não faz sentido e não funcionou.

Achei muito bom o exemplo do JQuery mas o primeiro entrave é que nunca fiz nada com JQuery e ao ler a respeito fiquei preocupado com o que li da tradução antes de importar a biblioteca jquery. Não sei se estou errado em ficar preocupadao:

 

Esta é a versão recomendada do jQuery para usar o aplicativo. O código aqui deve ser estável e utilizável em todos os navegadores modernos.

 

As versões minified, apesar de terem um tamanho de arquivo maior do que as versões embalados (nota: versão compactada não está disponível na versão atual), são geralmente as melhores versões para uso em implantações de produção. As versões embalados exigem não-trivial tempo de processamento do lado do cliente para descompactar (descompactar) o código enquanto as versões minified não. As versões do jQuery embalado levará menos tempo para fazer o download do que as versões minified ou uncompressed, no entanto, cada vez que a biblioteca é carregada (inicialmente ou a partir do cache do navegador) ele precisará ser descompactado o que causará um atraso não-trivial no execução de qualquer código jQuery cada vez que é carregado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

<%
Cor1 = "#000099"
Cor2 = "#FFCC00"

Controle = 0

If Controle = 0 Then
 Cor = Cor1
 Controle = 1
Else
 Cor = Cor2
 Controle = 0
End if

<td bgcolor=<%Response.Write(Cor)%>></td>
%>

 

ou de uma forma mais simples

 

<%If x mod 2 = 0 Then
cor = "#000000" Else 
cor = "#FF0000"%>

 

Isso dentro de um loop, adicionando 1 a cada a cada passada no X.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.