Olá! Durante uma das aulas o professor ensina a aplicar CSS na tabela, para demonstrar, é aplicada uma borda na tabela. Infelizmente quando tento por a borda o navegador não a lê; somente quando especifico ao máximo onde a configuração será feita que o CSS vem a funcionar
Quando para por borda na tabela por exemplo especifico com: .horarios > tbody > tr > td
<table class="horarios">
<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*/
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
/*configurações do header*/
header{
display: flex;
background-color: #BBBBBB;
padding-top: 3vh;
padding-bottom: 3vh;
}
header > img{
margin-left: 15vw;
}
nav{
position: absolute;
top: 19vh;
right: 14vw;
}
nav > ul{
display: flex;
list-style: none;
font-size: 1.4rem;
}
nav > ul > li{
margin: 0.7vw;
font-weight: bold;
}
a{
text-decoration: none;
color: black;
}
a:hover{
color: rgb(141, 93, 5);
}
/*-------*/
/*corpo do site*/
main{
width: 940px;
margin: 10vh auto;
}
form{
margin: 40px 0;
}
form label, legend{
display: block;
font-size: 20px;
margin: 0 0 10px;
}
.nome-padrao, form textarea{
display: block;
margin: 0 0 10px;
padding: 10px 25px;
width: 50%;
text-align: center;
}
.checkbox{
margin: 20px 0;
}
p.teste{
color: orange;
}
select{
margin-bottom: 2vh;
}
.enviar{
width: 40%;
padding: 15px 0;
background-color: orange;
color: white;
font-weight: bold;
font-size: 18px;
border: none;
border-radius: 5px;
transition: 0.2s all;
cursor: pointer;
}
.enviar:hover{
background-color: darkorange;
transform: scale(1.05);
}
.horarios {
margin: 25px 0 40px;
}
.horarios > thead{
background-color: #555555;
color: white;
font-weight: bold;
}
th, td{
border: 1px solid #000000;
}
/*footer*/
footer{
display: block;
background-image: url(./imagens/bg.jpg);
padding: 5vh 0;
}
.rodape{
text-align: center;
color: white;
}