My Table in Tablepress seems broken?

Tina, are you sending someone a private email about this? Right now you created a thread in the How To and Troubleshooting forum (not sure if you’re aware), but are addressing it to one person. Please read Tobias’ reply here: https://www.ads-software.com/support/topic/css-for-table-name?replies=15&view=all

Hi Tina,

you probably just ran into an issue with the table having too many rows for it to fit on the screen. That just happens as a fixed structure like a table simply can’t fit on all screen sizes (which is not the actual screen size, but the size that the theme designates as the “content area”. That’s why it can appear that the table is just cut off.)

To work around that, a common solution is to add horizontal scrolling. For that feature, there are two possibilities. One is to use the corresponding checkbox on the table’s “Edit” screen, which does however not work all the time and has some prerequisites. There, the other solution for horizontal scrolling (from https://www.ads-software.com/support/topic/responsive-tables-scroll-only?replies=6#post-5511954 ) is better here, and I suggest that you try that on those tables that don’t fit.

For those “weird arrows”: Those are the indicators for the table being sortable ?? To remove those, just turn off the Sorting function. I can’t really see issues with a different font size though. The table on https://www.hsctstopsms.com/hsct-facilites/ has a smaller font size in the table body (10px) as you have set that in the “Custom CSS” for table 1.
The table at https://www.hsctstopsms.com/hsct-facilites/ has a slightly bigger font size in the table body, as there’s no such CSS for table 2.

Deinstalling/reinstalling TablePress will not help, as your table data is totally fine. It’s simply a styling question, with your theme’s default CSS and the “Custom CSS” contributing to this. Reinstalling does not change this however.
Creating backups of your table data by exporting the tables to a file is always a good idea though.

Regards,
Tobias

Hi,

thanks for the hint, Andrew! Fortunately, I had found this thread in Tina’s profile, after I read that she had written a new post.
Maybe you can move it to the TablePress subforums?

Best wishes,
Tobias

I can move it to the Plugins forum but not in individual plugin sections, unfortunately.

Hi Andrew,

oh well, no problem. I added the “tablepress” tag, which I also monitor, so that it’s not going to get lost ??
Thanks!

Best wishes,
Tobias

Apologies Andrew, I did not notice?! Did not mean to.

Tobias, thanks for the advice, much appreciated! I will check it out and let you know. I did try using the enable horizontal scrolling option but it did not work for me! ?

Tx

Hi,

yes, that’s what I meant. The “Horizontal Scrolling” checkbox does not work in all cases. If that happens, you’ll have to switch to the manual approach from my link above.

Regards,
Tobias

Hi Tobias,

Thanks for your response. If this is the solution to what you are suggesting, where would I find the html to change?

solution:
yes, that solution relies on JavaScript. If you don’t want to use JS, you can use CSS scrolling, for which you will indeed need a wrapper <div> then, e.g.

<div class=”tablepress-scroll-wrapper”>
[table id=123 /]
</div>

and then “Custom CSS” like

.tablepress-scroll-wrapper {
overflow-x: auto;
overflow-y: hidden;
}
————————-
Can you point me to how I get to the html?

Thanks

Tina

Hi Tina,

somewhere on the page with the table, you have inserted the Shortcode, like

[table id=123 /]

That needs to be extended to

<div class="tablepress-scroll-wrapper">
[table id=123 /]
</div>

(on the “Edit” screen of the page, the best way being the “Text” and not the “Visual” editor there).

The “Custom CSS”

.tablepress-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}

has to go into the “Custom CSS” textarea on the “Plugin Options” screen.

Regards,
Tobias