Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Thead no css não está funcionando como esperado

Referente ao curso HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas, no capítulo Estrutura de tabelas e atividade Estilos na tabela

por Felipe Araujo
| 43.7k xp | 15 posts

Problemas:

1- Diferente de como foi visto na aula, a minha tabela já veio formatada, com linhas, colunas e background no cabeçalho. A do professor veio "crua".

2- Das alterações feitas em "thead", a única que está funcionando é a font-weight. O resto não tem efeito algum.

Observações:

-Sim, o reset.css está carregado corretamente no html.

-Sim, tudo está sendo salvo e a página está sendo atualizada a cada tentativa;

-Já tentei alterar inclusive pelo DevTools, mas também não obtive resultado:

print do devtools alterado sem sucesso

Tem outros tópicos aqui no fórum com o mesmo problema, sei que pode ser resolvido se eu incluir o "th" ao lado do "thead" no .css, ficando assim:

thead, th {
    background: #555555;    
    color: white; 
    font-weight: bold ;
}

Mas ainda fica a dúvida de porque não funciona como na aula...

.html relativo a tabela:

<table>
                <thead>
                    <tr>
                        <th>Dia</th>
                        <th>Horário</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Segunda</td>
                        <td>8h ~ 20h</td>
                    </tr>
                    <tr>
                        <td>Quarta</td>
                        <td>8h ~ 20h</td>
                    </tr>
                    <tr>
                        <td>Sexta</td>
                        <td>8h ~ 20h</td>
                    </tr>
                </tbody>
            </table>

.css:

thead {
    background: #555555;    
    color: white; 
    font-weight: bold ;
}
4 respostas
por Lorena Garcia
| 8464.1k xp | 12397 posts
Alura Scuba Team Suporte Educacional

Oi Felipe, tudo bem? Se estiver tudo linkado ao html (como o style.css) e mesmo assim não estiver funcionando, você pode fazer algumas alterações.

No css você pode colocar assim:

thead {
    background: #555555;    
    color: white; 
    font-weight: bold;
}

td, th {
    border: 1px solid #000000;
    padding: 8px 15px;
   font-weight: bold;
}

E se atentar a formatação do seu código, verificar se não existe espaço que não deveria ter, sabe?

Se não der certo, você poderia por favor, colar seu código todo aqui? o html e o css, que fica bem mais fácil visualizar o que pode estar errado.

Obrigada e bons estudos.

por Felipe Celestino Vasconcelos
| 86.6k xp | 35 posts
Supervisor de T.i

Aqui funcionou normal coloca todo html e o Css para gente ver..

por Felipe Araujo
| 43.7k xp | 15 posts

Bom dia!

Segue o .html e o .css no post seguinte

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Contato - Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css"> 
    </head>
    <body>
        <header>
            <div class="caixa">
                <h1><img src="logo.png" alt="Logo da Barbearia Alura"></h1>

                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>

        <main>
            <form>
                <label for="nomesobrenome">Nome e sobrenome</label>
                <input type="text" id="nomesobrenome" class="input-padrao" required>

                <label for="email">Email</label>
                <input type="email" id="email" class="input-padrao" required  placeholder="seuemail@dominio.com">

                <label for="telefone">Telefone</label>
                <input type="tel" id="telefone" class="input-padrao" required placeholder="(XX) XXXXX-XXXX">

                <label for="mensagem">Mensagem</label>
                <textarea cols="70" rows="10" id="mensagem" class="input-padrao" required></textarea>

                <fieldset>
                    <legend>Como prefere o nosso contato?</legend>

                    <label for="radio-email"><input type="radio" name="contato" value="email" id="radio-email">Email</label>


                    <label for="radio-telefone"><input type="radio" name="contato" value="telefone" id="radio-telefone">Telefone</label>


                    <label for="radio-whatsapp"><input type="radio" name="contato" value="whatsapp" id="radio-whatsapp" checked>WhatsApp</label>

                </fieldset>

                <fieldset>
                    <legend>Qual horário prefere ser atendido?</legend>
                    <select>
                        <option>Manhã</option>
                        <option>Tarde</option>
                        <option>Noite</option>
                    </select>
                </fieldset>

                <label class="checkbox"><input type="checkbox" checked>Gostaria de receber nossas novidades por email?</label>

                <input type="submit" value="Enviar formulário" class="enviar">
            </form>

            <table>
                <thead>
                    <tr>
                        <th>Dia</th>
                        <th>Horário</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Segunda</td>
                        <td>8h ~ 20h</td>
                    </tr>
                    <tr>
                        <td>Quarta</td>
                        <td>8h ~ 20h</td>
                    </tr>
                    <tr>
                        <td>Sexta</td>
                        <td>8h ~ 20h</td>
                    </tr>
                </tbody>
            </table>
        </main>

        <footer>
            <img src="logo-branco.png" alt="Logo da Barbearia Alura">
            <p class="copyright">&copy; Copyright Barbearia Alura - 2019</p>
        </footer>
    </body>
</html>
solução!
por Felipe Araujo
| 43.7k xp | 15 posts

Fui postar o .css completo pra vocês e percebi que ele estava cheio de linhas duplicadas (no início e meio do código, que se repetiam no fim, como se eu tivesse visto a aula 2 vezes) e com várias variáveis que sequer existiam no meu html! Havia cerca de 70 linhas a mais que o código modelo. Devo ter ficado sonâmbulo alguma noite e ter escrito linhas aleatórias, única explicação haha.

Bem que o Paulo Silveira disse que a gente chega a sonhar com código.

Obrigado pela ajuda, pessoal!