Jump to content

Como centralizar tabela na página responsiva?


Postagens Recomendadas

Boa tarde gente. Sou novo na programação e tô tendo uma dificuldade com a parte da tabela. Quero torná-la responsiva, mas ela fica saindo da página e não consigo de jeito nenhum deixar ela fixa.

Alguem sabe me auxiliar onde tô errando?

HTML:

<table id="valores">
<tr>
<td>Calories</td>
<td><strong>277kcal</strong></td>
</tr>
<tr>
<td>Carbs</td>
<td><strong>0g</strong></td>
</tr>
<tr>
<td>Protein</td>
<td><strong>20g</strong></td>
</tr>
<tr>
<td>Fat</td>
<td><strong>22g</strong></td>
</tr>
</table>

Style.css:
table#valores {
border-spacing: 0px;
margin-left: auto;
margin-right: auto;
width: 600px;
table-layout:fixed;

}

table#valores td{
padding: 8px;
margin: 0 auto;
align-items: center;
}

td:nth-child(1) {
width: 20%;
text-align:left;

}
td {
text-align:center;
}

td {
border-bottom: 1px solid black;
}

Captura de tela 2024-09-09 173331.png

Captura de tela 2024-09-09 173400.png

  • Curtir 1
Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora


×
×
  • Create New...