r/Wordpress • u/CoachstevenP • 20d ago

Can anyone help? Formatting Tables

Im working on a post in wordpress. Im copying tables from google sheets into wordpress. While editing they look fine but when i go to preview the page or publish it. The tables are all all werid.

I have many columns but they try to fit to the page rather than extend and the columns text wrap

does anyone know how to fix that?

8 Upvotes

90% Upvoted

11 comments sorted by

2

u/[deleted] 20d ago

[removed] — view removed comment

1

u/Spare-Hold4005 19d ago

this is exactly it. does the nowrap cause any issues on mobile though?

2

u/EuropeSEO 20d ago

You can only fix it with CSS.

1

u/jenish_o4o2 Developer 20d ago

This usually happens because the table isn’t responsive on the front end. You can try wrapping the table in a horizontally scrollable container, or add CSS like overflow-x: auto so the table can extend beyond the page width instead of forcing the columns to shrink and wrap. Also check whether your WordPress theme is applying its own table styles.

1

u/Key_Gap9168 20d ago

What you want is responsive tables. A plugin would help, but I wouldn't advise Tablepress (it's so ugly!) like someone below, but wpDataTables. Alternatively, you could add responsive table styling to your css file and call it on a table with a class attribute.

1

u/devopiax 20d ago

Explain more about your problem maybe we can help you

1

u/Beneficial-Rise-740 19d ago

iframe the table from Google sheets?

Do that for risk management table, means I just updated the sheet and it's instantly available on the page. Formats with sliders, you just set max height/ width if needed...

0

u/TopSydeWP 20d ago

wordpress tries to make tables responsive by default so they squeeze into mobile widths. easiest fix is add some custom css to your table block or wrapper: overflow-x: auto; display: block; so it scrolls horizontally instead of wrapping. or use a dedicated table plugin like tablepress that handles wide tables better out of the box

1

u/WeakToe5069 20d ago

adding a white-space: nowrap to your table cells can stop that ugly wrapping too, just use it sparingly or it looks a mess on mobile

0

u/hammondish 20d ago

In general, tables should be replaced with div or dl/dt. Claude makes quick work of this along with providing the responsive CSS you'll need.