Cor da linha da tabela alternativa usando CSS?

462

Eu estou usando uma tabela com cor de linha alternativa com isso.

tr.d0 td {
  background-color: #CC9999;
  color: black;
}
tr.d1 td {
  background-color: #9999CC;
  color: black;
}

<table>
  <tr class="d0">
    <td>One</td>
    <td>one</td>
  </tr>
  <tr class="d1">
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

Expandir snippet

Aqui estou usando a classe for tr, mas quero usar apenas para table. Quando uso classe para tabela, isso se aplica em tralternativa.

Posso escrever meu HTML assim usando CSS?

<table class="alternate_color">
    <tr><td>One</td><td>one</td></tr>
    <tr><td>Two</td><td>two</td></tr>
    </table>

Como faço para que as linhas tenham "listras de zebra" usando CSS?

html css html-table Kali Charan Rajput
fonte

1

Eu criei uma demonstração usando todos os padrões possíveis para nth-child () - xengravity.com/demo/nth-child

xengravity

760

$(document).ready(function()
{
  $("tr:odd").css({
    "background-color":"#000",
    "color":"#fff"});
});

tbody td{
  padding: 30px;
}

tbody tr:nth-child(odd){
  background-color: #4C8BF5;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>

Expandir snippet

Existe um seletor de CSS, realmente um pseudo-seletor, chamado n-filho. Em CSS puro, você pode fazer o seguinte:

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

Nota: Não há suporte no IE 8.

Ou, se você tiver jQuery:

$(document).ready(function()
{
  $("tr:even").css("background-color", "#000000");
});

Russell Dias
fonte

é possível também alterar a cor do hiperlink de linhas alternativas. Eu quero uma cor diferente de hiperlink para linha par e outra para ímpar. Thanks

Enviado em

4

Ótima resposta! Mas apenas para informação, existe outro seletor CSS que pode ser usado, ie. tr:nth-of-type(odd/even)

Nikhil Nanjappa

2

@ عثمانغني: Sim, você teria apenas que fazertr:nth-child(even) a

Gerard

1

Não funciona se você escrever seu html dinamicamente. Então você precisa adicionar classes às linhas.

Erik

Em 2019: essa não é mais a melhor solução. Use CSS puro .

Chiramisu 08/07/19

158

Você tem a :nth-child()pseudo-classe:

table tr:nth-child(odd) td{
    ...
}
table tr:nth-child(even) td{
    ...
}

Nos primeiros dias do :nth-child()seu navegador, o suporte era meio ruim. É por isso que o cenário class="odd"se tornou uma técnica tão comum. No final de 2013, fico feliz em dizer que o IE6 e o IE7 estão finalmente mortos (ou doentes o suficiente para parar de cuidar), mas o IE8 ainda está por aí - felizmente, é a única exceção.

Álvaro González
fonte

3

Resposta preferida, uma vez que não se aplica CSS para cabeçalho

Mike

Oi, isso está atrasado em alguns anos, mas que tal adicionar uma classe selecionada com uma cor bg com jqeury à linha da tabela quando clicada. Notei que a pseudo classe nth-child bg-color substitui quando você adiciona uma classe "selecionada" ao jqeury

dutchkillsg

@dutchkillsg Essa parece ser uma pergunta nova em vez de um comentário à minha resposta ...

Álvaro González

Para "listras de zebra" (vertical), basta trocar tr:nth-child(odd)comtd:nth-of-type(odd) . Observe que, nesse caso, você está aplicando uma pseudo classe diferente aos elementos, tde não aos trelementos.

Chiramisu 08/07/19

36

Basta adicionar o seguinte ao seu código html (dentro do <head>) e pronto.

HTML:

<style>
      tr:nth-of-type(odd) {
      background-color:#ccc;
    }
</style>

Mais fácil e rápido que os exemplos do jQuery.

bmich72
fonte

Essa deve ser a resposta aceita. Na medida do possível, o CSS deve lidar com o estilo, enquanto o javascript pode ser usado para lidar com outros assuntos.

Tormod Haugene

Eu não faço html diariamente. #cccnão parece um código de cores válido para mim. Você pode explicar? Obrigado.

Tommy.carstensen 03/04/19

1

@ tommy.carstensen é chamado de "forma hexadecimal abreviada". Basicamente, #cccé expandido para #cccccc, o que significa que cada cor RGB possui o valor hexadecimal ccou valor decimal 204(ou seja rgb(204, 204, 204)). Leia mais sobre isso aqui -> en.wikipedia.org/wiki/Web_colors#Shorthand_hexadecimal_form

Nick Grealy

Não funciona no Chrome Versão 78.0.3904.108

IlludiumPu36

13

posso escrever meu html assim com o uso de css?

Sim, você pode, mas precisará usar o :nth-child()pseudo-seletor (que possui suporte limitado):

table.alternate_color tr:nth-child(odd) td{
   /* styles here */
}
table.alternate_color tr:nth-child(even) td{
   /* styles here */
}

Sarfraz
fonte

13

Podemos usar regras CSS ímpares e pares e método jQuery para cores de linhas alternativas

Usando CSS

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

Usando jQuery

$(document).ready(function()
{
  $("table tr:odd").css("background", "#ccc");
  $("table tr:even").css("background", "#fff");
});

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

<table>
  <tr>
    <td>One</td>
    <td>one</td>
   </tr>
  <tr>
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

Expandir snippet

Santosh Khalse
fonte

10

A maioria dos códigos acima não funciona com a versão do IE. A solução que funciona para outros navegadores IE + é essa.

   <style type="text/css">
      tr:nth-child(2n) {
             background-color: #FFEBCD;
        }
</style>

Sriwantha Attanayake
fonte

9

<script type="text/javascript">
$(function(){
  $("table.alternate_color tr:even").addClass("d0");
   $("table.alternate_color tr:odd").addClass("d1");
});
</script>

Pranay Rana
fonte

46

OK, eu sei que o jQuery é bastante onipresente neste site, mas independentemente você não deve postar o jQuery sem explicação. Este script não funcionará por si só.

usar o seguinte

4

Você pode usar os seletores de enésimo filho (ímpar / par), mas nem todos os navegadores (por exemplo , 6-8, ff v3.0 ) suportam essas regras, portanto, por que a maioria das soluções recai em algum tipo de solução javascript / jquery para adicionar as classes ao linhas para esses navegadores não compatíveis para obter o efeito listra de tigre.

quadrado vermelho
fonte

3

Existe uma maneira bastante fácil de fazer isso no PHP, se eu entender sua consulta, presumo que você codifique em PHP e esteja usando CSS e javascript para melhorar a saída.

A saída dinâmica do banco de dados carregará um loop for para iterar pelos resultados que são carregados na tabela. Basta adicionar uma chamada de função ao seguinte:

echo "<tr style=".getbgc($i).">";  //this calls the function based on the iteration of the for loop.

adicione a função ao arquivo de página ou biblioteca:

function getbgc($trcount)
{

$blue="\"background-color: #EEFAF6;\"";
$green="\"background-color: #D4F7EB;\"";
$odd=$trcount%2;
    if($odd==1){return $blue;}
    else{return $green;}

}

Agora, isso alternará dinamicamente entre cores em cada linha da tabela recém-gerada.

É muito mais fácil do que mexer com CSS, que não funciona em todos os navegadores.

Espero que isto ajude.

marca
fonte

obrigado @mark. Não é possível consertar o site em PHP, .net ou HTML simples.

Kali Charan Rajput

Cor da linha da tabela alternativa usando CSS?

Respostas: