Doubts of Alignment between two Tables

Asked

Viewed 42 times

1

I have a little doubt about the alignment between these two tables <table id="tableCabecVendasML"> and <table id="tableDadosVendasML">

NOTE: I made this page this way because I want to use it in a company system, I do not want to scroll screen and I want to have a list of data without paging, so the "header" fixed

see example

HTML and CSS

html {
    margin:0;
    padding:0;
    height:100%;
}

body {
    margin:0;
    padding:0;
    height:100%;
}

#divAreaSite {
    background: #cad5c5;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}

#divAreaConteudo {
    background: #abb4a6;
    margin-left: 5%;
    margin-right: 5%;
    height: 100%;
}


#LinhaCabec {
    height: 20px;
    width: 100%;
}


#tableEstrutura, td,tr {
    border: 1px solid black;
}

#tableEstrutura {
    border-collapse: collapse;
    width: 100%;
    height: 100%;
}

#LinhaTitulo {
    background-color: #0fcc15;
    height: 20px;
}

#LinhaMenu {
    background-color: #cc71cc;
    height: 20px;
}

#LinhaRodape {
    background-color: #cc71cc;
    height: 20px;
}
#AreaDados {
    background-color: #cccc8e;
    height: 100%;
    overflow-y: auto;
}

#tableCabecVendasML {
    width: 100%;
    //position: relative;
}

#tableDadosVendasML {
    width: 100%;
    //height: 100%;
}

.ColCodigo {
    width: 20%;
}
.ColNomeCliente {
    width: 20%;
}

.ColData {
    width: 20%;
}
   <!DOCTYPE html>
<html lang="pt-br">
   <header>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title>Vendas Mercado Livre</title>
      <link rel="stylesheet" type="text/css" href="css/ver_vendas_mercadolivre.css">
   </header>
   <body>
      <div id="divAreaSite">
         <div id="divAreaConteudo">
            <table id="tableEstrutura">
               <tr>
                  <td id="LinhaTitulo" colspan="2">Titulo</td>
               </tr>
               <tr>
                  <td id="LinhaMenu" colspan="2">Menu</td>
               </tr>
               <tr id="LinhaCabec">
                  <td rowspan="2">menu  <br> Lateral </td>
                  <td>
                     <table id="tableCabecVendasML">
                        <tr>
                           <td class="ColCodigo"> Código </td>
                           <td class="ColNomeCliente"> Nome do Clinte </td>
                           <td class="ColData"> Data</td>
                        </tr>
                     </table>
                  </td>
               </tr>
               <tr>
                  <td>
                     <div id="AreaDados">
                        <table id="tableDadosVendasML">
                           <tr>
                              <td class="ColCodigo"> AAAAAAAAA</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> 12121212</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> 12121212</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> 12121212</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> 12121212</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> 12121212</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> 12121212</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> 12121212</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> 12121212</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> 12121212</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> 12121212</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> 12121212</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> 12121212</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> Coluna 3</td>
                           </tr>
                           <tr>
                              <td class="ColCodigo"> sdasdsd</td>
                              <td class="ColNomeCliente"> Coluna 2</td>
                              <td class="ColData"> The END </td>
                           </tr>
                        </table>
                       </div>
                  </td>
               </tr>
               <tr>
                  <td id="LinhaRodape" colspan="2">Rodape</td>
               </tr>
            </table>
         </div>
      </div>
   </body>
</html>

css3

  • Gustavo, I believe the best way, would be to create a single table and "fix" the header. So the navigation bar will not interfere in the size of the columns, however, the job of fixing the header of a table is not easy. I found 2 examples in pure css and html: <ul> <li> <a href="https://codepen.io/tjvantoll/pen/JEKIu">https://codepen.io/tjvantoll/pen/JEKIu</a> </li> <li> <a href="https://jsfiddle.net/dPixie/byB9d/3/">https://jsfiddle.net/dPixie/B9by3/</<a> </li> </ul>

No answers

Browser other questions tagged css3

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