Help: how to make table with sticky-header and scrollable ?

[hiroshiichise]

Thanks for publishing nice package!

I want to scrollable table with sticky-header because the table has a lot of rows. so, I read bulma documents and wrote like this. But sticky-header didn't work. What should I do?

<div class="table-container">
  <table class="table has-sticky-header">
     <thead>(table header)</thead>
     <tbody>(table content)</tbody>
  </table>
</div>

[dangowans]

Thanks for reaching out.

Honestly, I haven't done much testing with tables wrapped in the .table-container. I'll look and see if it's an easy fix, but depending on the size of your target device screens and the number of columns in your table, you may be able to leave out the .table-container altogether.

In general, mobile devices seem to have very mixed results with this sticky header technique.

[dangowans]

As I mentioned, leaving out the .table-container altogether may be your best option. You may also get decent results by adding a couple extra styles to your .table-container to set the overflow and the height of the container.

<div class="table-container" style="overflow-y:auto;max-height:100vh;">
<table>
<thead></thead>
<tbody></tbody>
</table>
</div>

Above I set the height to the height of the browser window. Depending on your application, a smaller height may look better.

Hope this helps!

[dangowans]

I added some information to the README about usage with .table-container. Hopefully it will help others with the same issue.