<thead> with fixed top table

Asked

Viewed 471 times

1

I have a <table>, and would like to leave the <thead> of it with fixed top:

<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>

But every way I try, he creates a scroll within the table, the fields are misaligned, have some configuration of the bootstrap to do this, or some other way that works?

css twitter-bootstrap

  • Related: It is possible to add an overflow behavior with scroll only in tbody of a table?

  • Other: Fix thead while scrolling table

  • @Andersoncarloswoss already tried this first, but they are misaligned, I will check the others.

  • 1

    And always try to make a [mcve]. Posting HTML with the structure of your template doesn’t make it much easier. Try to generate an HTML that has the actual data by reproducing the problem you mentioned. In this case, you can use the snippet.

  • https://answall.com/questions/141185/tag-thead-fixada-no-topo-e-tbody-com-barra-de-scroll-em-tabela-no-html

  • All the ways I try to make an example, the field doesn’t get Responsive, it gets fixed, and I need it to follow the bootstrap pattern.

  • Mariana as her problem in question was exclusively in Bootstrap I prefer to answer you here than in the other answers cited here. But I will vote to close as duplicate ok, because I understand her as part of the scope of the other questions okay.

Show 2 more comments

1 answer

2


I arrived at a solution that works well with Bootstrap 3, I tested it here and I had no problem. There is only one drawback... It does not work in IE, because it uses the position:sticky, see here the support of browsers: https://caniuse.com/#feat=css-Sticky . Tb needed to make an adjustment using box-shadow to ensure that the text that passes behind the top will not appear

See how the result turned out:

.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>

  • Thank you, that’s right, every way I tried, was disproportionate, for being Responsive. Very useful.

  • @marianac_costa massa! This option will work in 95% of browsers, only it will not get fixed in IE unfortunately.

Browser other questions tagged css twitter-bootstrap

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