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>