How to fit lines from a CSS table?

Asked

Viewed 25 times

1

I am trying to improve my knowledge with HTML and CSS and I have a question/problem. I’m making a table that starts empty, and as the user types information into a textbox, she inserts lines.

The problem that cells are not fitting properly within the table and I wanted to keep an initial size (height) for her, for she must begin with no line.

I tested some options using the display: block;, but with it I cannot configure the % which each cell in each row occupies.

What am I doing wrong?

#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>

  • "The problem that cells are not fitting properly within the table ...", did not understand very well, could explain better? if possible, edit your question with a little clearer explanation.

  • Hello Marlon. It’s important you [Edit] and add a [mcve] of the problem, with a step by step of what you have already done and explain clearly and objectively what you need. should not duplicate (repeat) the question, just edit and wait for the reopening process, ie not delete, just edit the question. To better enjoy the site, understand and avoid closures is worth reading the Stack Overflow Survival Guide in English. Thank you for understanding.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.