Can I add a header in the responsive tables stack mode?

Hi,

thanks for your question, and sorry for the trouble.

No, sorry, the stack mode does not support a header at the moment. The header row would be shown in the same way (stacking) as the other rows, but above all of them – which simply doesn’t make sense.

Regards,
Tobias

Hi Tobias,
thanks for your reply.
It would even help me when the header row is displayed in the same was as the other rows. By changing the colours (for each column) the user could distinguish the content.
Would this be possible?
Regards,
Bernd

Hi Bernd,

you could make the header visible again, by adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

@media (max-width: 767px) {
    .tablepress-id-1 thead {
        display: table-header-group !important;
    }    
    .tablepress-id-1 thead th {
        display: block;
        width: 100% !important;
    }
}

Regards,
Tobias

Hi Tobias,

thankk you.
Regards,
Bernd

Hi,

no problem!

Best wishes,
Tobias

It would be great if could add a function to add the header in the stack mode. I think @best6699 means that the header row would be shown not above the other rows (with content) but next the (content) rows and repeat for every (content) row.
Like this:
Header row – Content row
Header row – Content row
Header row – Content row
So we would create a stack table with 2 columns.
Is this somehow possible to do with CSS?

Hi asurus,

I see what you mean, but unfortunately, I’m not aware of an easy solution for this that only uses CSS ?? Sorry.

Regards,
Tobias

Hi Tobias,
understand and thank you for your reply.

Hi,

sure, no problem! Sorry that I could not help with a solution here.

Regards,
Tobias

Hey Tobias ??

What about the other table-plugins? Does they have solutions with others technics than css?
E.g. NinjaTables (and many more) have this kind of responsive tables. I’m convinced, that this is this best method to display tables on mobile devices.

Maybe these example can give you an idea, how it is possible?
See:
https://wpmanageninja.com/ninja-tables/use-case/

• This reply was modified 4 years, 1 month ago by nyks-barton.

Hi,

thanks for the link to that example! This does indeed look nice! Unfortunately, it’s also a rather complex approach, with quite a lot of JavaScript code involved. I prefer simple solutions here, as they are usually working much better and more reliable on a wide range of sites and themes. I’ll however take a deeper look into this one, maybe I can extract some approaches and ideas. Thanks!

Regards,
Tobias

Thanks, that would be nice.

The 1st example-table on that page is nicely stacking (when with gets low).

Hi,

yes, it’s indeed nice! I hope to be able to offer more such options in the future!

Best wishes,
Tobias

Hi Tobias,

Here’s the solution of what best6699 said: https://deeptownguide.com/Buildings/Details/7/smelting.

Responsive tables in stack mode take the column header and put it at every row before the content.

It would be great to see that in future updates.

Hi,

unfortunately, this is not yet directly possible, as it requires extra HTML markup. I hope to be able to add this in the future.

Best wishes,
Tobias