1

Estou tentando melhorar meus conhecimentos com HTML e CSS e me surgiu uma dúvida/problema. Estou fazendo uma tabela que começa vazia, e conforme o usuário digita informações em uma textbox, ela insere linhas.

O problema que as células não estão se encaixando corretamente dentro da tabela e eu queria manter um tamanho inicial (height) pra ela, pois ela deve começar sem linha alguma.

Testei algumas opções usando o display: block;, porém com ele não consigo configurar a % que cada célula em cada linha ocupa.

O que estou fazendo de errado?

#dashboard{
  width:80%;
  border: 2.5px solid;
  margin: 0 auto;
}

#table-dashboard{
  width:100%;
  border-spacing: 0;
  font-size: 20px;
  font-family: Courier;
}

#table-dashboard tbody{
  display: block;
  overflow-y: auto;
  height: 300px;
  width: 100%;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Teste</title>
    <link rel="stylesheet" type="text/css" href="webroot/css/estilo.css">
  </head>
  <body>
    <div id="dashboard">
      <table id="table-dashboard">
        <tbody>
        <tr>
          <td>1.</td>
          <td>Batata</td>
          <td>R$5,99</td>
        </tr>
        <tr>
          <td>2.</td>
          <td>Cenoura</td>
          <td>R$1,50</td>
        </tr>
        <tr>
          <td>3.</td>
          <td>Tomate</td>
          <td>R$3,00</td>
        </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

2
  • "O problema que as células não estão se encaixando corretamente dentro da tabela ...", não entendi muito bem, poderia explicar melhor? se possível, edite a sua pergunta com uma explicação um pouco mais clara. Commented 20/02/2021 às 2:19
  • Olá Marlon. É importante você editar e adicionar um Exemplo Mínimo, Completo e Verificável do problema, com um passo a passo do que já fez e explicar de forma clara e objetiva o que precisa. não deve duplicar (repetir) a pergunta, apenas edite e aguarde o processo de reabertura, ou seja, não delete, basta editar a pergunta. Para aproveitar melhor o site, entender e evitar fechamentos vale a pena ler o Guia de sobrevivência do Stack Overflow em Português. Obrigado por compreender.
    – Syzoth
    Commented 20/02/2021 às 2:25

0

Pesquise outras perguntas com a tag .