Sticky table header

Topic: Sticky table header

aandrade pro asked 7 years ago

Hi I would like to know how to make a table header sticky. I tried the following code without success.


<table class="table table-hover mt-4">
  <thead class="sticky">
  <tr>
    <th>Canal</th>
    <th>Pedido</th>
    <th>Data</th>
    <th>Cliente</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let pedido of pedidos">
    <th scope="row">{{pedido.pedido | canal}}</th>
    <td>{{pedido.pedido | pedido}}</td>
    <td>{{pedido.data}}</td>
    <td>{{pedido.cliente.nome}}</td>
  </tr>
  </tbody>
</table>


$('.sticky').sticky({
   topSpacing: 90
  ,zIndex: 2
});

Add comment

Edyta Dabrowska answered 7 years ago

1 1 Best answer

Hello, Here I have an example of a sticky table header. Let me know if this is a solution that suits you. regards,

napsys pro commented 7 years ago

How can I make it work for this example? https://mdbootstrap.com/content/tables/ -----> "Table with panel" Thank you!.

Davinder Virk commented 6 years ago

I have same issue. With the example you provided my table-responsive really messes up alignment, column spacing, and takes away horizontal scrolling. Please help

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

aandrade

Pro User

0Support score
1Questions 0Answers

0Snippets likes 0Snippets