Skip to main content
Pergunta fechada como "Não é adequada para este site" por Syzoth
adicionou 452 caracteres ao conteúdo
Fonte Link
Cmte Cardeal
  • 7mil
  • 5
  • 27
  • 54

Como encaixar linhas de uma tabela cssCSS?

estouEstou 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 textboxtextbox, 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 (heightheight) pra ela(pois, pois ela deve começar sem linha alguma).

Testei algumas opções usando o display blockdisplay: 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%;
}
<!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>
#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%;
}
 

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

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?

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

Fonte Link

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