I need some help with the table press and table press extension.
I use 2 tables on this pages.

the table halfway the page (figuur 5 with ID 1) is perfect and behaves good on desktop, tablet and mobile.

But the table on the bottom of this page (figuur 8 with ID 2) is somehow flipping the top row and first column. This is visible on iPhone, macOS safari and firefox.

Example:
dekstop view: https://imgur.com/a/CR3Lodb
mobile device view: https://imgur.com/i0XWfC9

Can you suggest how to use this table as expected. A Fixed first row (flip mode) and all other rows scrollable.

Her is the Custom CSS:
.tabel {
font-size: 15px;
font-family: “myriad-pro”, sans-serif;
font-style: Normal;
line-height: 1.6em;
font-weight: 400;
letter-spacing: .02em;
outline: none;
resize: none;
color: black;
}

.tablepress thead th {
vertical-align: top;
}

.tablepress .column-1 {
font-weight: 700;
}

.tablepress thead th,
.tablepress tfoot th {
background-color: #F4F3F2;
color: #000;
}

.tablepress .row-hover tr:hover td {
background-color: #009fe3;
color: #fff;
}

.tablepress .sorting:hover,
.tablepress .sorting_asc,
.tablepress .sorting_desc {
background-color: #009fe3;
color: #fff;
}

.tablepress-id-1 .column-1,
.tablepress-id-1 .column-2,
.tablepress-id-1 .column-3,
.tablepress-id-1 .column-4,
.tablepress-id-1 .column-5,
.tablepress-id-1 .column-6,
.tablepress-id-1 .column-7,
.tablepress-id-1 .column-8,
.tablepress-id-1 .column-9,
.tablepress-id-1 .column-10,
.tablepress-id-1 .column-11,
.tablepress-id-1 .column-12 {
width: 131px;
}

.tablepress-id-2 .column-1,
{
width: 150px !important;
}

.tablepress-id-2 .column-2,
.tablepress-id-2 .column-3,
.tablepress-id-2 .column-4,
.tablepress-id-2 .column-5,
.tablepress-id-2 .column-6 {
width: 131px;
}

Could you help me with the following?
This is the screenshot of my table (in responsive flip mode) before adding any CSS code:
https://tinypic.com/r/2s9cbwy/9

I wanted the header column to be aligned with the row height, so I added this code:

.tablepress-id-123 th,
.tablepress-id-123 td {
  height: 41px;
}

The table then looks like this:
https://ibb.co/Qb8pTYC

Are there additional code I need to input to solve this?

I love your plugin and good work you are doing. Keep it up.

I have problem with responsive tables i’m trying to solve for days. Unfortunately i’m not the best in CSS nor your plugin.

This site is responsive and it is in flip mode (because scroll mode or collapse doesn’t look good)
https://www.5nej.cz/srovnani-nastroju-na-tvorbu-webu/

First row (header) is not matching other rows (columns) is there some fix for that? Titles are H3 but i can change them to p (actually i tried and it didn’t help).

Any ideas?
Cheers, Jarda

I use responsive extension (already donated ) and was wondering whether it is possible to fit sizes of header cells to content. Please check attached page screen:

https://pasteboard.co/1eXXnhiI.png

I use images and buttons at table so at flip mode everything is distracted.

Greetings
Marek

https://www.ads-software.com/plugins/tablepress/

https://www.ads-software.com/plugins/tablepress/