Como faço para mudar a cor de uma mesa listrada no bootstrap?
Bootstrap oferece várias classes para criar mesas de estilo. Por exemplo, o “Table-Bordered”A propriedade pode ser utilizada para criar uma tabela com uma borda,“Table-borderless”Para uma mesa sem fronteira,“Tabela-escura”Para uma mesa com uma cor cinza escura e mais. Mais especificamente, o “Tabela com listras”É uma dessas classes que cria uma tabela com um padrão de tira de zebra.
Este artigo descreverá como mudar a cor da mesa listrada no bootstrap.
Pré -requisito: Crie uma mesa listrada no bootstrap
O "Tabela com listras”Class cria uma mesa listrada em bootstrap. A mesa listrada refere -se à mesa com a decapagem de zebra aplicada à linha da tabela. A remoção de zebra é especificada como “rgba (0, 0, 0, .05)”Cor, e é aplicada nas linhas de mesa ímpares. No entanto, usando CSS, você também pode alterar esta cor, que será coberta mais tarde.
Exemplo
Este exemplo demonstra como criar uma tabela listrada no bootstrap:
- Primeiro, adicione um “
”Tag que é utilizada para criar uma tabela. Atribua o “mesa" e "Tabela com listras”Aulas para os“
”Elemento para criar uma mesa listrada.
- Consiste em duas partes, cabeçalho e corpo, especificado usando o “" e "”Tags, respectivamente.
- ““
”Cria as linhas de tabela. - ““
”Tags especificam os títulos. - ““
”Tags adicionam os dados da tabela. Aqui está o código HTML:
S.Não Primeiro nome Sobrenome Pontuação 1 Diana Oliver 90 2 James Liam 89 3 Lucas William 78 Saída
Até agora, vimos como usar a classe de bootstrap “Tabela com listras”Para criar uma mesa listrada. Agora, vá em direção à próxima seção para alterar a cor da mesa listrada usando CSS.
Como mudar a cor de uma mesa listrada no bootstrap?
Após o exemplo em andamento, escreva o código a seguir no arquivo CSS:
.Tabela com listras> TBody> Tr: Nth-Child (ímpar)> TD,
.Tabela-Striped> tbody> tr: nth-child (ímpar)> th
Background-Color: RGB (118, 187, 189);De acordo com o snippet de código fornecido:
- Primeiro, mencione o nome da classe “Tabela com listras”. Em seguida, acesse os dados e títulos de tabela ímpares no “" papel.
- O "Nth-Child (n)”O seletor é utilizado para selecionar o enésimo filho do pai em que“n”Pode ser qualquer fórmula ou palavra -chave como“até" ou "chance”.
- Por fim, defina o “cor de fundo”Usando o“rgb ()”Função. Este estilo substituirá o “Tabela com listras”Estilo da classe.
Saída
Dessa forma, você pode modificar a cor de uma mesa listrada de bootstrap.
Conclusão
Bootstrap “Tabela com listras”A classe é usada para fazer uma mesa listrada. Tem um estilo CSS predefinido, “cor de fundo”Propriedade com o valor“rgba (0, 0, 0, .05)”Nas linhas de mesa ímpares do“" seção. No entanto, você pode ajustar a cor da mesa listrada usando CSS. Este post demonstrou o método para alterar a cor de uma mesa listrada em bootstrap.
- « Como corrigir o erro “Git Fatal não sabia ler do repositório remoto”?
- Como corrigir “Código dos 10 melhores erros do Windows interrompeu este dispositivo porque ele relatou problemas”? »
- Consiste em duas partes, cabeçalho e corpo, especificado usando o “" e "”Tags, respectivamente.