installation tablepress responsive

Hi,

thanks for your post, and sorry for the trouble.

No, it’s not difficult. Please see the lower part of the page https://tablepress.org/extensions/ for some instructions.

Regards,
Tobias

Hello and thanks for your reply. I installed the plugin premium, where can I find the “Four approaches for responsiveness”? I need to set them up on my tables.
My problem is that on the PC I see a normal table made of 3 columns, but on the phone I see 2 columns and a half. In order to see the whole 3 columns on the phone I have to scroll right.
What I want is to see the whole 3 columns on the phone, the same way I see them on the PC. Which of the 4 approaches for responsiveness do I need in order to do this? And how can I do it?
If I solve the problem I will definitely do the donation.
Thanks, regards
This is the link to the page I’m working on https://www.qualitatedesca.eu/moda/

Actually, the solution I like the best is:
-on PC, I want to see the 3 horizontal columns
-on phone, I want to see the same 3 columns vertically
Thanks

Hi,

please see https://tablepress.org/extensions/responsive-tables/ for this.
You will want to use the flip mode then and have to change the Shortcode on the page accordingly.

Regards,
Tobias

Hi, I pasted this
[table id=1 responsive=stack responsive_breakpoint=”phone” /]
and it works the way I wanted.
But on the phone I see that it’s all aligned on the left. Could it be something I have in the CSS?
This is my CSS (that I built bit by bit using your forum as I’m no expert at all)
.tablepress tbody td {
font-family: Helvetica;
font-size: 13px;
}

body .tablepress {
word-wrap: normal;
word-break: normal;
}

.tablepress th,
.tablepress td {
padding: 3px !important;
}

.tablepress .shortcode-star-rating {
padding: 0;
white-space: nowrap;
}

.tablepress .column-1 {
width: 15%;
}

.tablepress .column-2 {
width: 58%;
}

.tablepress .column-3 {
width: 32%;
font-size: 11px;
text-transform: uppercase;
text-align: center;
}

The question I want to ask is how do I center the table also on the phone?
Thanks!
Antonella

Hi,

to fix this, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

@media (max-width: 767px) {
  .tablepress-responsive-stack-phone tbody td {
    width: 100%!important;
  }
}

Regards,
Tobias

The problem is solved, thank you
Regars

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!