thead with fixed top table [duplicate]

Question

thead with fixed top table [duplicate]

Navigation

#1 by (1 votes)

1

I have a <table> , and I would like to leave <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 in every way I try, it creates a scroll within the table, the fields are misaligned, do you have any configuration of bootstrap to do this, or some other way that works? / p>

css twitter-bootstrap

asked by anonymous 12.09.2018 / 16:32

1 answer

ASP.NET MVC after updating the packages does the default template get lost? How to create the mechanics and appearance of the zoom effect used in the reveal.js framework?

score 1 · Accepted Answer

I came up with a solution that works well with Bootstrap 3, I tested it here and had no problem. It only has one drawback ... It does not work in IE, because it uses position:sticky , see here the support of the Browsers: link . Tb I needed to make an adjustment using box-shadow to ensure that the text that goes through the top will not appear

See what the result was like:

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