Data Table: sticky header

Hi, all.

I have an F7 Data Table in my app. I want to have sticky header for this table and use position: sticky; position: -webkit-sticky; CSS properties for that in the following way:

            <th style='position: sticky; position: -webkit-sticky; top: -1px; background: red'>HEad ghjgj f dhgjgh fhj dddd</th>
            <th>HEadddddmm  11111</th>
        //my body

If I put <table> element into page-content directly, sticky behaviour works fine. But if I put it into data-table, as it is required by F7, sticky behaviour is gone. Is there any way to combine sticky and F7 data table?

Testing devices:

  • Google Chrome 74
  • iOS 12.2 (iPhone 6 Plus)

F7 version: 3.6.5
Full sample code can be found here:

You can try to don’t use <div class="data-table"> wrapper for table and add this class for table:

<table class="data-table">...

And this to CSS: {
    width: 100%;
    border: none;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    text-align: left;

That’s incredible! Saved tons of nerves for me!
Being in Rostov, I’ll definitely treat you a beer!

I managed to simplify this, follow the code:

<th class="label-cell bg-color-white th-sticky">Referência</th>

.th-sticky {
  position: sticky !important;
  top: 0px !important;
  z-index: 99 !important;
  box-shadow: 5px 1px #e0e0e0 !important;

Thank you. Worked perfectly for what I needed.