É possível escurecer o cabeçalho de uma tabela em 2024? [Resolvido]

Frank K Hosaka · Outubro 26

Durante muito tempo, o Bootstrat tinha uma classe "thead-dark" que escurecia o cabeçalho de uma tabela, até chegar o 5.3.3.

Agora a classe "thead-dark" não funciona. O 5.3.3 disse que inventou um novo atributo data-bs-theme="dark", ele funciona para toda <table>, mas não funciona para o <thead>.

O único jeito é usar o antigo CSS convencional, mas ele só funciona se você não usar o Bootstrap na <table>.

Isso explica porque muitos desenvolvedores vivem tristes, a vida deles é só cinza e lágrimas:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Exemplo de Tabela com Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
    rel="stylesheet" 
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
     crossorigin="anonymous">
</head>
<body>
    <table class="table">
        <thead data-bs-theme="dark">
            <tr><th>Nome</th></tr>
        </thead>
        <tbody>
            <tr><td>João</td></tr>
        </tbody>
    </table>
    <table>
        <thead style="background-color: #343a40; color: white;">
            <tr><th>Nome</th></tr>
        </thead>
        <tbody>
            <tr><td>João</td></tr>
        </tbody>
    </table>
</body>
</html>

Editado Outubro 26 por Frank K Hosaka

Frank K Hosaka · Outubro 26

Encontrei a solução. Ao invés de quebrar a cabeça com o <thead>, eu fui trabalhar no <th> e deu certo!

<table class='table table-hover table-sm'>
        <tr>
          <th class='bg-dark text-white border border-white'>Data Cadastro
          <th class='bg-dark text-white border border-white'>Posto Emissor
          <th class='bg-dark text-white border border-white'>Tipo Especialidade
          <th class='bg-dark text-white border border-white'>Especialidade
          <th class='bg-dark text-white border border-white'>Peso
          <th class='bg-dark text-white border border-white'>Altura
          <th class='bg-dark text-white border border-white'>Urgente
          <th class='bg-dark text-white border border-white'>Ação
</table>

Editado Outubro 26 por Frank K Hosaka

Entrar

É possível escurecer o cabeçalho de uma tabela em 2024? [Resolvido]

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades