[Resolvido] Table Body (tbody) com scroll y

[Sergio S. F. Pereira 39]

Boa tarde senhores, estou tentando colocar um scroll vertical no conteúdo da minha tabela para deixar o header fixo e rolar somente o tbody,  mas não estou conseguindo, já quebrei a cabeça e de repente to patinando em algo bem simples, alguém pode ver o que está errado no meu código por favor?

Aqui está o meu fiddle: https://jsfiddle.net/kyq05vws/

 

HTML

<table>
  <thead>
    <tr>
      <th>Seq.</th>
      <th>Codigo</th>
      <th>Nome</th>
      <th>Qtd</th>
      <th>Preço</th>
      <th>Valor Total</th>
      <th></th>
  </tr>
  </thead>
  <tbody id="tabela">
    <tr>
      <td>1</td>
      <td>REF004</td>
      <td>BOLSA DE ROUPAS DE BEBE</td>
      <td><input type="text" name="inputs[0][qtd_unitaria]" value="1" size="5" /></td>
      <td><input type="text" id="preco_unitario[]" name="inputs[0][preco_unitario]" value="12.00" size="5" readonly="readonly" /></td>
      <td><input type="text" id="preco_total[]" name="inputs[0][preco_total]" value="12.00" size="5" readonly="readonly" /></td>
      <td><button type="button" id="vendas_del">×</button></td>
    </tr>
    <tr>
      <td>1</td>
      <td>REF002</td>
      <td>BOLSA ROUPAS MISTA CRIANCA</td>
      <td><input type="text" name="inputs[1][qtd_unitaria]" value="1" size="5" /></td>
      <td><input type="text" id="preco_unitario[]" name="inputs[1][preco_unitario]" value="17.00" size="5" readonly="readonly" /></td>
      <td><input type="text" id="preco_total[]" name="inputs[1][preco_total]" value="17.00" size="5" readonly="readonly" /></td>
      <td><button type="button" id="vendas_del">×</button></td>
    </tr>                     
    <tr>
      <td>1</td>
      <td>REF004</td>
      <td>BOLSA DE ROUPAS DE BEBE</td>
      <td><input type="text" name="inputs[0][qtd_unitaria]" value="1" size="5" /></td>
      <td><input type="text" id="preco_unitario[]" name="inputs[0][preco_unitario]" value="12.00" size="5" readonly="readonly" /></td>
      <td><input type="text" id="preco_total[]" name="inputs[0][preco_total]" value="12.00" size="5" readonly="readonly" /></td>
      <td><button type="button" id="vendas_del">×</button></td>
    </tr>
    <tr>
      <td>1</td>
      <td>REF002</td>
      <td>BOLSA ROUPAS MISTA CRIANCA</td>
      <td><input type="text" name="inputs[1][qtd_unitaria]" value="1" size="5" /></td>
      <td><input type="text" id="preco_unitario[]" name="inputs[1][preco_unitario]" value="17.00" size="5" readonly="readonly" /></td>
      <td><input type="text" id="preco_total[]" name="inputs[1][preco_total]" value="17.00" size="5" readonly="readonly" /></td>
      <td><button type="button" id="vendas_del">×</button></td>
    </tr>                     
    <tr>
      <td>1</td>
      <td>REF004</td>
      <td>BOLSA DE ROUPAS DE BEBE</td>
      <td><input type="text" name="inputs[0][qtd_unitaria]" value="1" size="5" /></td>
      <td><input type="text" id="preco_unitario[]" name="inputs[0][preco_unitario]" value="12.00" size="5" readonly="readonly" /></td>
      <td><input type="text" id="preco_total[]" name="inputs[0][preco_total]" value="12.00" size="5" readonly="readonly" /></td>
      <td><button type="button" id="vendas_del">×</button></td>
    </tr>
    <tr>
      <td>1</td>
      <td>REF002</td>
      <td>BOLSA ROUPAS MISTA CRIANCA</td>
      <td><input type="text" name="inputs[1][qtd_unitaria]" value="1" size="5" /></td>
      <td><input type="text" id="preco_unitario[]" name="inputs[1][preco_unitario]" value="17.00" size="5" readonly="readonly" /></td>
      <td><input type="text" id="preco_total[]" name="inputs[1][preco_total]" value="17.00" size="5" readonly="readonly" /></td>
      <td><button type="button" id="vendas_del">×</button></td>
    </tr>
    <tr>
      <td>1</td>
      <td>REF004</td>
      <td>BOLSA DE ROUPAS DE BEBE</td>
      <td><input type="text" name="inputs[0][qtd_unitaria]" value="1" size="5" /></td>
      <td><input type="text" id="preco_unitario[]" name="inputs[0][preco_unitario]" value="12.00" size="5" readonly="readonly" /></td>
      <td><input type="text" id="preco_total[]" name="inputs[0][preco_total]" value="12.00" size="5" readonly="readonly" /></td>
      <td><button type="button" id="vendas_del">×</button></td>
    </tr>
    <tr>
      <td>1</td>
      <td>REF002</td>
      <td>BOLSA ROUPAS MISTA CRIANCA</td>
      <td><input type="text" name="inputs[1][qtd_unitaria]" value="1" size="5" /></td>
      <td><input type="text" id="preco_unitario[]" name="inputs[1][preco_unitario]" value="17.00" size="5" readonly="readonly" /></td>
      <td><input type="text" id="preco_total[]" name="inputs[1][preco_total]" value="17.00" size="5" readonly="readonly" /></td>
      <td><button type="button" id="vendas_del">×</button></td>
    </tr>
  </tbody>
</table> 

CSS

table { 
  margin-top:10px;
  width: 90%; 
  height:200px;
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
table tbody {
    height: 200px;
    overflow-y: scroll;
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

[Fabio Victor 25]

coloca isso no seu css 

table tbody {
  position: fixed;
}

 

 

Porém isso só funciona se na sua pagina só tiver a tabela e ela ocupar o tamanho da tela ou menos.

[Fabio Victor 25]

Se a solução de cima não te servir, da uma olhada neste link http://mkoryak.github.io/floatThead/

[Sergio S. F. Pereira 39]

Antes da tabela tenho uma COL, uma ROW e um container, aí complicou.

 

Por coincidência eu tava testando ainda agora este plugin rsrsrs, o problema é o auto-sizing das colunas ele ao invés de ajustar a largura, quebra a linha dendro da td, o jeito por enquanto vai ser usar width para as colunas, eu queria uma solução bem simples mas pelo visto vou ter que acabar usando o datatables mesmo porque vou precisar de algumas funcionalidades dele em outras tabelas.

 

Obrigado por enquanto! 

[Sergio S. F. Pereira 39]

Por enquanto coloquei tamanho fixo nas colunas, se alguém quiser aqui está o fiddle: https://jsfiddle.net/k5f9wbsq/1/

 

O bom mesmo seria conseguir sem usar JS mas se não tiver outro jeito vou partir pro datatables.

 

[Sergio S. F. Pereira 39]

Compartilhando...
 

Para quem precisar usar tabelas responsivas em um template específico como foi o meu caso.

1 - Como o Fábio disse acima, se você tiver somente a tabela na página é só aplicar o "position:fixed" e o "overflow-y:scroll" no body da tabela e funciona de boa e o header fica fixo.

2- Datatables - Muito bom, cheio de recursos mas proporcionalmente aos recursos são as dificuldades em relação ao layout, tendo que usar uma série de parâmetros e recorrer a hacks em js para modificar certos elementos.

3-CSS e JS - foi o que eu utilizei para resolver meu problema, ao invés de usar tabela usei div´s mesmo e um pequeno hack para controlar o tamanho da tabela. 

 

Ficou responsivo e adaptável a qualquer layout.

Fiddle: https://jsfiddle.net/w9Lxubf9/1/