Move up HTML table using CSS

Asked

Viewed 163 times

0

I want to upload an HTML table and leave it at the same time as the form to the left of it, I have tried it in several ways (top, vertical-align, etc), but without result.

body {
  background: #d6d6f5;
  padding-left: 4%;
}

.caixa {
  width: 40%;
  background: #ffffff;
  display: inline-block;
  border: 20px solid #d6d6f5;
  border-radius: 1px;
  vertical-align: left;
}

.divtabela {
  text-align: center;
  display: inline-block;
}

.tabela {
  background: #ffffff;
  width: 200%;
  margin-left: 80px;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <title>Cadastro de clientes</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <link REL="SHORTCUT ICON" HREF= "imgs/icone.png"  type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

</head>
    <input type="button" class="voltar" value="←"  onclick=" return BackToComMenu()">

<body>
    <div class="caixa">
    <center><img id="logo" src="imgs/logo.png" alt="Logo da FullTime"></center>



    <main>
        <form action="php/cadastrar.php" method="POST" id="FormCadastro">

            <p>Cadastro de Clientes</p>             

            <div class="inputWithIcon">
              <input name="nome" type="text" placeholder="Nome">
              <i class="fa fa-user fa-lg fa-fw" aria-hidden="true" name="user"></i>
            </div>

            <div class="inputWithIcon">
              <input name="email" type="text"  placeholder="Email" onclick="return checarEmail()" >
              <i class="fa fa-envelope fa-lg fa-fw" aria-hidden="true" name="user"></i>
            </div>

            <div class="inputWithIcon">
                <input name="telefone" type="text" placeholder="Telefone" maxlength="11">
                <i class="fa fa-phone fa-lg fa-fw" aria-hidden="true" name="user"></i>
              </div>

            <div class="inputWithIcon">
              <input name="cpf" type="text" placeholder="CPF" maxlength="14" OnKeyPress="formatar('###.###.###-##', this)">
              <i class="fa fa-address-card   fa-lg fa-fw" aria-hidden="true" name="user"></i>
            </div>


            <input type="submit" value="Cadastrar" name="enviar" onclick="return cadastrar()">

            </div>


            <div class="divtabela">     
                <table class="tabela">
                    <thead>
                        <tr>

                            <th >Email <i class="fa fa-envelope fa-lg fa-fw"></i></th>
                            <th >CPF <i class="fa fa-credit-card fa-lg fa-fw"></i></th>


                        </tr>
                    </thead>

                    <tbody>
                        <tr>

                            <td>Teste1</td>
                        <td>000.000.000-00</td>

                      </tr>
                      <tr>

                        <td>Teste2</td>
                        <td>999.999.999-99</td>
                        </tr>   
                    </tbody>
                </table>
            </div>
        </form>
    </main>
</body>

html css
  • 1

    Do you want to leave the table of the same size as the form or move up the table and let it line up? the title of your question and the description say different things.

  • I want to align the table up so it’s the same time as the form.

2 answers

1

In this case as you put it display-inline-block in the elements they assume a hybrid scope between block/inline and vc can use the alignment property inline vertical-align to align the "table" at the top.

inserir a descrição da imagem aqui

Code of the image above.

OBS: Your code has closed tags erras, and in CSS you put vertical-align: left; if and vertical how can it be left? 

<!DOCTYPE html>
<html lang="pt-br">

<head>
<title>Cadastro de clientes</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<link REL="SHORTCUT ICON" HREF="imgs/icone.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<style>
  body {
    background: #d6d6f5;
    padding-left: 4%;
  }

  .caixa {
    width: 40%;
    background: #ffffff;
    display: inline-block;
    border: 20px solid #d6d6f5;
    border-radius: 1px;
    vertical-align: left;
  }

  .divtabela {
    text-align: center;
    display: inline-block;
    
        vertical-align: top;
  }

  .tabela {
    background: #ffffff;
    width: 200%;
    margin-left: 80px;
  }
</style>
</head>
<input type="button" class="voltar" value="←" onclick=" return BackToComMenu()">

<body>
  <div class="caixa">
    <center><img id="logo" src="imgs/logo.png" alt="Logo da FullTime"></center>



    <main>
      <form action="php/cadastrar.php" method="POST" id="FormCadastro">

        <p>Cadastro de Clientes</p>

        <div class="inputWithIcon">
          <input name="nome" type="text" placeholder="Nome">
          <i class="fa fa-user fa-lg fa-fw" aria-hidden="true" name="user"></i>
        </div>

        <div class="inputWithIcon">
          <input name="email" type="text" placeholder="Email" onclick="return checarEmail()">
          <i class="fa fa-envelope fa-lg fa-fw" aria-hidden="true" name="user"></i>
        </div>

        <div class="inputWithIcon">
          <input name="telefone" type="text" placeholder="Telefone" maxlength="11">
          <i class="fa fa-phone fa-lg fa-fw" aria-hidden="true" name="user"></i>
        </div>

        <div class="inputWithIcon">
          <input name="cpf" type="text" placeholder="CPF" maxlength="14" OnKeyPress="formatar('###.###.###-##', this)">
          <i class="fa fa-address-card   fa-lg fa-fw" aria-hidden="true" name="user"></i>
        </div>


        <input type="submit" value="Cadastrar" name="enviar" onclick="return cadastrar()">

  </div>


  <div class="divtabela">
    <table class="tabela">
      <thead>
        <tr>

          <th>Email <i class="fa fa-envelope fa-lg fa-fw"></i></th>
          <th>CPF <i class="fa fa-credit-card fa-lg fa-fw"></i></th>


        </tr>
      </thead>

      <tbody>
        <tr>

          <td>Teste1</td>
          <td>000.000.000-00</td>

        </tr>
        <tr>

          <td>Teste2</td>
          <td>999.999.999-99</td>
        </tr>
      </tbody>
    </table>
  </div>
  </form>
  </main>
</body>

</html>

  • Thanks @hugocsl, the vertical align worked even though, not aligned with the next box. Anyway I wasn’t even getting this, I think I was putting such style in class . table, and not in . divtable as you did. On the closed tags, unfortunately I could not identify them kk, but I will strive so that it does not happen again.

  • For vertical-align: left there’s no excuse, right? Pure kkk inattention

  • 1

    @Jonatanrocha quiet my dear! Continue with the studies []

  • Thanks !! You can leave

1


There are two attributes that together allow you to move an item using the Cartesian plan. They are position and Transform. I ran the code on the machine and left in the table as follows:

.divtabela {
  text-align: center;
  display: inline-block;
 position: relative;
 transform: translateY(-140%);


}

The position: relative; "relativizes" the position relative to the layout of the information on the screen (its initial position), allowing you to apply other motion atrbutes. Already the transform: translateY(-140%); serves to "transform" that is, change its position relative to the old one. (Note that in the syntax I am using translateY, to say that my change is made on the y-axis, and the percentage to be applied depends on how much above (or below) you want. (Transform also accepts pixels)

  • Perfect, because that way I could choose with precision the alignment desired. Thank you!!!

Browser other questions tagged html css

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