1

Eu tenho uma <table>, e gostaria de deixar o <thead> dela com topo fixo:

<table class="table table-responsive table-hover"
       id="tablepesquisaprodutos" style="font-size:12px;">
    <thead>
        <tr>
            <th></th>
            <th>Código</th>
            <th>Descrição</th>
            <th>Qtd</th>
            <th>Preço Un.</th>
            <th>Desc %</th>
            <th>Desc R$</th>
            <th>Total</th>
            <th>ICMS</th>
            <th>Alíquota</th>
            <th>V.ICMS</th>
            <th>%ISS</th>
            <th>V.ISS</th>
            <th>%IPI</th>
            <th>V.IPI</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.PedidosProdutosF)
        {
            <tr>
                <td><input type="checkbox" class="link-check" onclick="PegaID(@item.Id);" onchange="cbChange(this);" /></td>
                <td>@item.CodigoProduto</td>
                <td>@item.Produto.nome</td>
                <td>@item.Qtd</td>
                <td>@item.PrecoUnitario.ToString("N2")</td>
                <td>@item.DescontoP.ToString("N2")</td>
                <td>@item.DescontoV.ToString("N2")</td>
                <td>@item.Total.ToString("N2")</td>
                <td>@item.ICMS</td>
                <td>@item.Aliquota.ToString("N2")</td>
                <td>@item.VICMS.ToString("N2")</td>
                <td>@item.ISS.ToString("N2")</td>
                <td>@item.VISS.ToString("N2")</td>
                <td>@item.IPI.ToString("N2")</td>
                <td>@item.VIPI.ToString("N2")</td>
            </tr>
        }
    </tbody>
</table>

Porém de toda forma que eu tento, ele cria uma scroll dentro da tabela, os campos ficam desalinhados, tem alguma configuração do bootstrap pra fazer isso, ou alguma outra forma que funcione?

7

1 Resposta 1

2

Cheguei em uma solução que funciona bem com o Bootstrap 3, testei aqui e não tive problema. Só tem um inconveniente... Não funciona no IE, pois utiliza o position:sticky, consulte aqui o suporte dos Browsers: https://caniuse.com/#feat=css-sticky . Tb precisei fazer um ajuste utilizando box-shadow para garantir que o texto que passa por traz do topo não vai aparecer

Veja como ficou o resultado:

.tabela {
  height: 200px;
  overflow: scroll;
}
.tabela th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 1px 0 0 #ddd, 0 -5px 0 0 #fff;
} 
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <div class="container">
      <div class="row">
        <div class="col-xs-12 tabela">
          <table class="table table-responsive table-hover"
          id="tablepesquisaprodutos" style="font-size:12px;">
       <thead>
           <tr>
               <th></th>
               <th>Código</th>
               <th>Descrição</th>
               <th>Qtd</th>
               <th>Preço Un.</th>
               <th>Desc %</th>
               <th>Desc R$</th>
               <th>Total</th>
               <th>ICMS</th>
               <th>Alíquota</th>
               <th>V.ICMS</th>
               <th>%ISS</th>
               <th>V.ISS</th>
               <th>%IPI</th>
               <th>V.IPI</th>
           </tr>
       </thead>
       <tbody>
           <!-- @foreach (var item in Model.PedidosProdutosF)
           { -->
               <tr>
                   <td><input type="checkbox" class="link-check" onclick="PegaID(@item.Id);" onchange="cbChange(this);" /></td>
                   <td>@item.CodigoProduto</td>
                   <td>@item.Produto.nome</td>
                   <td>@item.Qtd</td>
                   <td>@item.PrecoUnitario.ToString("N2")</td>
                   <td>@item.DescontoP.ToString("N2")</td>
                   <td>@item.DescontoV.ToString("N2")</td>
                   <td>@item.Total.ToString("N2")</td>
                   <td>@item.ICMS</td>
                   <td>@item.Aliquota.ToString("N2")</td>
                   <td>@item.VICMS.ToString("N2")</td>
                   <td>@item.ISS.ToString("N2")</td>
                   <td>@item.VISS.ToString("N2")</td>
                   <td>@item.IPI.ToString("N2")</td>
                   <td>@item.VIPI.ToString("N2")</td>
               </tr>
               <tr>
                   <td><input type="checkbox" class="link-check" onclick="PegaID(@item.Id);" onchange="cbChange(this);" /></td>
                   <td>@item.CodigoProduto</td>
                   <td>@item.Produto.nome</td>
                   <td>@item.Qtd</td>
                   <td>@item.PrecoUnitario.ToString("N2")</td>
                   <td>@item.DescontoP.ToString("N2")</td>
                   <td>@item.DescontoV.ToString("N2")</td>
                   <td>@item.Total.ToString("N2")</td>
                   <td>@item.ICMS</td>
                   <td>@item.Aliquota.ToString("N2")</td>
                   <td>@item.VICMS.ToString("N2")</td>
                   <td>@item.ISS.ToString("N2")</td>
                   <td>@item.VISS.ToString("N2")</td>
                   <td>@item.IPI.ToString("N2")</td>
                   <td>@item.VIPI.ToString("N2")</td>
               </tr>
               <tr>
                   <td><input type="checkbox" class="link-check" onclick="PegaID(@item.Id);" onchange="cbChange(this);" /></td>
                   <td>@item.CodigoProduto</td>
                   <td>@item.Produto.nome</td>
                   <td>@item.Qtd</td>
                   <td>@item.PrecoUnitario.ToString("N2")</td>
                   <td>@item.DescontoP.ToString("N2")</td>
                   <td>@item.DescontoV.ToString("N2")</td>
                   <td>@item.Total.ToString("N2")</td>
                   <td>@item.ICMS</td>
                   <td>@item.Aliquota.ToString("N2")</td>
                   <td>@item.VICMS.ToString("N2")</td>
                   <td>@item.ISS.ToString("N2")</td>
                   <td>@item.VISS.ToString("N2")</td>
                   <td>@item.IPI.ToString("N2")</td>
                   <td>@item.VIPI.ToString("N2")</td>
               </tr>
               <tr>
                   <td><input type="checkbox" class="link-check" onclick="PegaID(@item.Id);" onchange="cbChange(this);" /></td>
                   <td>@item.CodigoProduto</td>
                   <td>@item.Produto.nome</td>
                   <td>@item.Qtd</td>
                   <td>@item.PrecoUnitario.ToString("N2")</td>
                   <td>@item.DescontoP.ToString("N2")</td>
                   <td>@item.DescontoV.ToString("N2")</td>
                   <td>@item.Total.ToString("N2")</td>
                   <td>@item.ICMS</td>
                   <td>@item.Aliquota.ToString("N2")</td>
                   <td>@item.VICMS.ToString("N2")</td>
                   <td>@item.ISS.ToString("N2")</td>
                   <td>@item.VISS.ToString("N2")</td>
                   <td>@item.IPI.ToString("N2")</td>
                   <td>@item.VIPI.ToString("N2")</td>
               </tr>
               <tr>
                   <td><input type="checkbox" class="link-check" onclick="PegaID(@item.Id);" onchange="cbChange(this);" /></td>
                   <td>@item.CodigoProduto</td>
                   <td>@item.Produto.nome</td>
                   <td>@item.Qtd</td>
                   <td>@item.PrecoUnitario.ToString("N2")</td>
                   <td>@item.DescontoP.ToString("N2")</td>
                   <td>@item.DescontoV.ToString("N2")</td>
                   <td>@item.Total.ToString("N2")</td>
                   <td>@item.ICMS</td>
                   <td>@item.Aliquota.ToString("N2")</td>
                   <td>@item.VICMS.ToString("N2")</td>
                   <td>@item.ISS.ToString("N2")</td>
                   <td>@item.VISS.ToString("N2")</td>
                   <td>@item.IPI.ToString("N2")</td>
                   <td>@item.VIPI.ToString("N2")</td>
               </tr>
               <tr>
                   <td><input type="checkbox" class="link-check" onclick="PegaID(@item.Id);" onchange="cbChange(this);" /></td>
                   <td>@item.CodigoProduto</td>
                   <td>@item.Produto.nome</td>
                   <td>@item.Qtd</td>
                   <td>@item.PrecoUnitario.ToString("N2")</td>
                   <td>@item.DescontoP.ToString("N2")</td>
                   <td>@item.DescontoV.ToString("N2")</td>
                   <td>@item.Total.ToString("N2")</td>
                   <td>@item.ICMS</td>
                   <td>@item.Aliquota.ToString("N2")</td>
                   <td>@item.VICMS.ToString("N2")</td>
                   <td>@item.ISS.ToString("N2")</td>
                   <td>@item.VISS.ToString("N2")</td>
                   <td>@item.IPI.ToString("N2")</td>
                   <td>@item.VIPI.ToString("N2")</td>
               </tr>
               <tr>
                   <td><input type="checkbox" class="link-check" onclick="PegaID(@item.Id);" onchange="cbChange(this);" /></td>
                   <td>@item.CodigoProduto</td>
                   <td>@item.Produto.nome</td>
                   <td>@item.Qtd</td>
                   <td>@item.PrecoUnitario.ToString("N2")</td>
                   <td>@item.DescontoP.ToString("N2")</td>
                   <td>@item.DescontoV.ToString("N2")</td>
                   <td>@item.Total.ToString("N2")</td>
                   <td>@item.ICMS</td>
                   <td>@item.Aliquota.ToString("N2")</td>
                   <td>@item.VICMS.ToString("N2")</td>
                   <td>@item.ISS.ToString("N2")</td>
                   <td>@item.VISS.ToString("N2")</td>
                   <td>@item.IPI.ToString("N2")</td>
                   <td>@item.VIPI.ToString("N2")</td>
               </tr>
           <!-- } -->
       </tbody>
      </table>
        </div>
      </div>
    </div>

4
  • Obrigado, era isso mesmo, toda forma que eu tentava, ficava desproporcional, por ser responsive. Muito útil.
    – Mariana
    Commented 12/09/2018 às 15:49
  • @marianac_costa massa! Essa opção vai funcionar em 95% dos navegadores, só não vai ficar fixo no IE infelizmente.
    – hugocsl
    Commented 12/09/2018 às 15:54
  • 1
    Até hoje esta é a melhor solução que já vi. Sensacional Commented 17/04 às 14:39
  • @ValterJunior valeu meu caro. Esse exemplo é só um starting-point, vc ainda pode fazer alguns ajustes finos para ficas mais elegante. Além disso, hoje em dia o suporte css deve ser muito melhor imagino. []'s
    – hugocsl
    Commented 17/04 às 18:04

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .