Skip to main content
1 de 2

Como encaixar linhas de uma tabela css?

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?

<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>
#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%;
}