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