Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

richardlopes94

Table Desalinhada

Recommended Posts

Olá senhores, podem me ajudar? Sou novo e estou fazendo um sistema simples de pesquisa de itens aqui na empresa. O problema que tenho é em relação ao desalinhamento da tabela ao incluir overflow-y. Já tentei de tudo. Abaixo segue os códigos.

Sem Overflow5a9d8e2b4483a_anexo2.thumb.PNG.2de132f6da48cc9cc22cbcf29b7de4fc.PNG

 

Com Overflow

5a9d8e2706926_anexo1.thumb.PNG.da2c8cd577be5ba938b29d0110812c2c.PNG

 

HTML

<html lang="en" >
    <head>
        <meta charset="UTF-8">
        <title>Localizador de Itens 3Cad</title>
        <link rel="shortcut icon" href="image\favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="css/style.css">
        <div id="banner">
            <img id="img" src="image/banner2.png">
        </div>
        <br>
    </head>
    <body>
        <form class="forma" method="post"">
            <input type="text" name="item" placeholder="Pesquise aqui..." required>
            <button type="submit">Buscar</button>
        </form>
        <?php include("php/table.php");?>
    </body>
    <br>    
    <br>
    
</html>

 

PHP

<?php
    $link = mssql_connect('MSSQL', 'sa', 'eCadPro2008');
    if(!$link) {
        echo'<br><br>Could not connect' . '<br>';
        } else {
        // echo'Successful connection';
    }
    
    mssql_select_db('Cinex');
    
    $item = trim($_POST['item']);
    
    $estrutura = mssql_query("select * from DISTINTA where CODFIG ='". $item ."'", $link);
    
    echo "<table class='table table-hover'><thead><tr><th>Código <img src=\"image\cod.ico\" height=16px align=absmiddle></th><th>Item <img src=\"image\item.png\" height=16px align=absmiddle></th><th>Quantidade <img src=\"image\quant.png\" height=16px align=bottom></th></tr></thead>";
    echo "<tbody>";
    while($estr = mssql_fetch_array($estrutura)) {
        
        $codigoEstrutura = $estr['COD'];
        $codigoItem = $estr['CODFIG'];
        $quantidade = $estr['QTA'];
        echo "<tr><td>" . $codigoEstrutura . "</td><td>" . $estr['CODFIG'] . "</td><td>" . $estr['QTA'] . "</td></tr>";        
}
    echo "</tbody>";
    echo "</table>";
?>

 

CSS

html,
body {
  margin: 0px;
}
#banner{
  overflow: hidden;
  height:auto;
  width:100%;
  box-shadow: 0px 3px 8px #AEAEAE;
}
#img{
  width:100%;
}
/* Form wrapper styling */
.forma {
    margin: 0.7%;
    margin-bottom:30px;
    width: 280px;
    height:30px;
    background: #9d9d9d;
}
/* Form text input */
.forma input {
    width: 190px;
    height: 30px;
    padding: 10px 15px;
    float: left;
    font: bold 12px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
    background: #eee;
    box-shadow: 0px 1px 2px #AEAEAE;
}
.forma input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.forma input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
   font-style: italic;
}
.forma input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
.forma input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}    
/* Form submit button */
.forma button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 30px;
    width: 90px;
    color: #fff;
    font-family: Arial Rounded MT;
    background: #5a5a5a;   
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
    box-shadow: 0px 1px 2px #AEAEAE;
}   
.forma button:hover{        
    background: #7d7d7d;
}    
.forma button:active,
.forma button:focus{   
    background: #3b3b3b;
    outline: 0;   
}
.forma button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #5a5a5a transparent;
    top: 7px;
    left: -6px;
}
.forma button:hover:before{
    border-right-color: #7d7d7d;
}
.forma button:focus:before,
.forma button:active:before{
        border-right-color: #3b3b3b;
}      
.forma button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}
/* -- Material Design Table style -------------- */
.table {
  width: 99%;
  margin: 0.5%;
  border-spacing:0;
}
.table thead{
}
.table tbody{
  position:fixed;
  overflow-y:scroll;
  height: 500px;
  width: 99%;
}
.table th {
  font-size: 16px;
  vertical-align: bottom;
  color: #FFFFFF;
  padding: 0.9rem;
  text-align: left;
  background-color: #8F8F8F;
  box-shadow: 0px 2px 3px #8F8F8F;
  box-shadow: 0px 2px 3px #8F8F8F;
  font-family: Arial Rounded MT;
  /*border:1px solid;*/
}
.table td {
  font-size: 14px;
  font-family: Arial;
  padding: 0.8rem;
  /*border:1px solid;*/
  width: 1%;
}
.table-hover > tbody > tr:hover > td {
  background-color: #F8F8F8;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Para criar uma tabela com scroll coloque a tabela em um div.container e declare width, height e overflow para o div.

<div class="container">
  <!-- marcação da tabela vai aqui -->
</div>
.container {
 width: 99%;
 margin: 0.5%
 height: 500px;
 overflow: scroll;
}

 

Nesta solução thead também rola com o scroll.

Pra a solução com thead fixo consulte: http://jsbin.com/vujoyubu/1/edit?html,css,output

Compartilhar este post


Link para o post
Compartilhar em outros sites
18 horas atrás, Maujor disse:

Para criar uma tabela com scroll coloque a tabela em um div.container e declare width, height e overflow para o div.


<div class="container">
  <!-- marcação da tabela vai aqui -->
</div>

.container {
 width: 99%;
 margin: 0.5%
 height: 500px;
 overflow: scroll;
}

 

Nesta solução thead também rola com o scroll.

Pra a solução com thead fixo consulte: http://jsbin.com/vujoyubu/1/edit?html,css,output

Esse link me ajudou a dar uma melhorada mas, eu preciso que seja responsivo. Olha como está meu código agora. Ainda estou com esse desalinhamento causado pela scroll bar. quando a scroll bar se aproxima da tabela ela empurra a td pra frente desalinhando.

 

.table {
  width:99%;
  margin: 0.5%;
  table-layout: fixed;
  border-collapse: collapse;
}
.table th,
.table td {
  padding: 15px;
  text-align: left;
  min-width: 100px;
  max-width: 600px;
  border: 1px solid;
  width:1%;
}
.table thead {
  font-size: 16px;
  font-family: Arial Rounded MT;
  background-color: #8F8F8F;
  color: #FFFFFF;
  box-shadow: 0px 2px 3px #8F8F8F;
}
.table thead tr {
  display: block;
  position: relative;
}
.table tbody {
  display: block;
  overflow: auto;
  height: 500px;
  overflow-y: scroll;
    overflow-x: hidden;
  font-size: 14px;
  font-family: Arial;
}
.table-hover > tbody > tr:hover > td {
  background-color: #F8F8F8;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por ILR master
      Fala galera.
      Espero que todos estejam bem.
      Seguinte: Tenho um arquivo xml onde alguns campos estão com : (dois pontos), como o exemplo abaixo:
       
      <item>
      <title>
      d sa dsad sad sadasdas
      </title>
      <link>
      dsadas dsa sad asd as dsada
      </link>
      <pubDate>sadasdasdsa as</pubDate>
      <dc:creator>
      d sad sad sa ad as das
      </dc:creator>
      </item>
       
      Meu código:
       
      $link = "noticias.xml"; 
      $xml = simplexml_load_file($link); 
      foreach($xml -> channel as $ite) {     
           $titulo = $ite -> item->title;
           $urltitulo = $ite -> item->link;
           print $urltitulo = $ite -> item->dc:creator;
      } //fim do foreach
      ?>
       
      Esse campo dc:creator eu não consigo ler. Como faço?
       
      Agradeço quem puder me ajudar.
       
      Abs
       
       
    • Por First
      Olá a todos!
       
      Eu estou criando um sistema do zero mas estou encontnrando algumas dificuldades e não estou sabendo resolver, então vim recorrer ajuda de vocês.
      Aqui está todo o meu código: https://github.com/PauloJagata/aprendizado/
       
      Eu fiz um sistema de rotas mas só mostra o conteúdo da '/' não sei porque, quando eu tento acessar o register nada muda.
      E eu também quero que se não estiver liberado na rota mostra o erro de 404, mas quando eu tento acessar um link inválido, nada acontece.
      Alguém pode me ajudar com isso? E se tiver algumas sugestão para melhoria do código também estou aceitando.
       
       
      Desde já, obrigado.
    • Por landerbadi
      Olá pessoal, boa tarde
       
      Tenho uma tabela chamada "produtos" com os seguintes campos (id, produto) e outra tabela chamada "itens" com os seguintes campos (id, prod_01, prod_02, prod_03, prod_04).
       
      Na tabela produtos eu tenho cadastrado os seguintes produtos: laranja, maçã, uva, goiaba, arroz, feijão, macarrão, etc.
       
      Na tabela itens eu tenho cadastrado os itens da seguinte maneira:
       
      1, laranja, uva, arroz, feijão;
      2, maçã, macarrão, goiaba, uva;
      3, arroz, feijão, maçã, azeite
       
      Meu problema é o seguinte: 
      Eu escolho um produto da tabela "produtos", por exemplo "uva".  Preciso fazer uma consulta na tabela "itens" para ser listado todos os registros que contenham o produto "uva" e que todos os demais produtos estejam cadastrados na tabela "produtos".
       
      No exemplo acima seria listado apenas dois registros, pois o terceiro registro não contém o produto "uva". 
       
      Alguém pode me ajudar? Pois estou quebrando a cabeça a vários dias e não consigo achar uma solução.
    • Por landerbadi
      Boa tarde pessoal. Estou tentado fazer uma consulta no banco de dados porém estou tendo dificuldades. Tenho uma tabela chamada "itens" com os seguintes campos: id, item, plural, ativo. Nela tem cadastrado vários itens e seu respectivo plural. No campo ativo eu coloco a letra "S" para informar que esta palavra está ativa no sistema. Por exemplo: 1, casa, casas, S 2, mesa, mesas, S 3, cama, camas, S 4, moto, motos, S 5, rádio, rádios O quinto registro "radio" não está ativo no sistema pois não tem um "S" no campo ativo. E outra tabela chamada "variações" com os seguintes campos (id, item1, item2, item3) com os seguintes registros: 1, casa, camas, moto 2, mesas, casas, radio 3, rádio, cama, mesa Eu preciso fazer uma busca na tabela variações da seguinte maneira: Eu escolho um registro na tabela "itens", por exemplo "casa". Preciso fazer com que o php me liste todos os registros da tabela "variações" que contenham a palavra "casa". Porém se tiver algum registro com a palavra "casas" também tem que ser listado. Neste caso ele irá encontrar dois registros. Agora eu preciso que o php verifique os demais itens e faça a listagem apenas dos item que estão ativos (que contenham um "S" no campo ativo. Neste caso ele irá encontrar apenas um registro, pois o segundo registro contém a palavra "rádio". E "rádio" não está ativo na tabela itens. Como faço isso?
    • Por First
      Olá a todos!
       
      Quando eu tento fazer o login me mostra esse erro "Could not log you in."; Alguém sabe me ajudar a resolver esse problema no meu código?
      <?php require_once("core/init.php"); if (Input::exists()) { if (Token::check(Input::get("token"))) { $validate = new Validate(); $validation = $validate->check($_POST, array( "username" => array("required" => true), "password" => array("required" => true) )); if ($validation->passed()) { $user = new User(); $remember = (Input::get("remember")) === "on" ? true : false; $login = $user->login(Input::get("username"), Input::get("password"), $remember); if ($login) { Session::flash("home", "Welcome back!"); Redirect::to("index.php"); } else { echo "Could not log you in."; } } else { foreach ($validation->errors() as $error) { echo $error."<BR>"; } } } } ?> <form action="" method="POST"> <div class="field"> <label for="username">Username</label> <input type="text" name="username" id="username"> </div> <div class="field"> <label for="password">Password</label> <input type="password" name="password" id="password"> </div> <div class="field"> <label for="remember"> <input type="checkbox" name="remember" id="remember"> Remember me </label> </div> <input type="hidden" name="token" value="<?php echo Token::generate(); ?>"> <input type="submit" value="Log in"> </form>  
       
      Desde já obrigado.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.