A date column is only 2 chars wide

Hi,

thanks for your question, and sorry for the trouble.

This has two causes: For one, you seem to be affected by a bug in the “Horizontal Scrolling” feature. Can you please try again after turning off that checkbox on the “Edit” screen of the table? To then get horizontal scrolling back, you could try the scroll mode of the TablePress Extension from https://tablepress.org/extensions/responsive-tables/, which uses a slightly better technical mechanism.

The second reason is in the theme, which adds too many word-wraps. To turn that off, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress {
    word-wrap: normal;
}

Regards,
Tobias

Hi Tobias!
Thanks for the quick reply. I made both changes to the plugin, but I still have a little problem with the table layout.

The table still excessively wraps the Title column. I moved the title column from col 3 to col 1 (thanks for making that easy to do in wpadmin!). This improved the text wrapping of the title, but it is still excessive, since the table still allocates a lot of extra width to columns 2 & 3, which only need a few characters. Is there any way to set individual column widths?

Your help is very much appreciated. Thank you!
-mj lee

Hi Tobias,
I re-read the TablePress documentation and found that I could use the plugin option to set the width of columns 2 and 3 to 100px and 130px. This looks fine on the computer browser, but it is not very responsive on an iphone, as shown:

Is this the best I can do? If so, it is ok.

It is not optimal, but it is functional. I looked at the Responsive Table Extensions, but I do not wish to use flip, scroll, etc.
Thank you again for your help. Sorry for all the questions!
-mj lee

• This reply was modified 8 years, 6 months ago by MJ.
• This reply was modified 8 years, 6 months ago by MJ.
• This reply was modified 8 years, 6 months ago by MJ.

apologize for duplicates, i’m having trouble incorporating this image link in my reply

https://soccermoviemom.com/iphone-portrait-iphone-landscape-columns-2-3-width-set-to-100-130-px/

Hi,

from what I can see, you CSS with the column widths is applied just fine. It’s simply that the used values are rather large for a mobile. Could you use values like 80px? That should create enough space on small screens for the first column.

Regards,
Tobias

Thank you again, Tobias!
For the 2 narrow columns of year and rating, I ended up changing the titles to <2 chars each: YR and #, and then I could set their widths to 75px. This sufficiently improved the iPhone layout for column 1.

I had to make the titles shorter, because otherwise in the computer browser with 80px widths, the sorting arrows overlaid the 4-6 char titles.

It just took a few minutes of testing to figure this out. I’m not sure how to mark this as resolved, but please do so.

Cheers and thank you again for your excellent support!
-mj Lee

Hi,

nice find! Yes, this looks like a good solution!

Best wishes,
Tobias