Hi all,
I’m wondering how do I change the table width in my post. The post, right now, does not show the complete table. See here.
Can anyone help? I’m using the Casper theme on the Ghost(Pro) Starter plan.
Thanks in advance.
It’d be helpful to see the page live, not just a screenshot. :)
Hey @ROY. I’m not sure how that table was built, but it has a bunch of hard-coded styling included. The guilty party here is that your table has a style tag that says “overflow: hidden” - if you change that to “overflow: scroll”, you’ll at least be able to scroll the table for content.
That table would probably work better with negative margins to bust it out of the main content column - you might take a look at the styles applied for full-width images in that theme and copy the CSS for max-width and margins.
p.s. You’ve got a chunk of that page with multiple list indents that’s pretty broken on mobile.
1 Like
I suggest you add a full width image to the post and see what css is being applied to it (whatever outer comtainer has it - probably the <figure> tag. Then you’ll want to apply those same styles (particularly those for max-width, margin, and width) to your table. If you use dev tools (f12 in most browsers), you can see the css settings in use.
1 Like
Thanks @Cathy_Sarisky. I inserted the tables as images, as I could not figure out the technical stuff. I wish there was an easier way.
Well, it looks fine to me now and in both orientations on an iPad and an iPhone.
1 Like
Thanks @Coolcmsc, yes I inserted the tables as images. I couldn’t figure out the technical stuff. I wish I could insert the table as a table though. The images, right now, look very small on mobile. Did the images expand for you when clicked?
1 Like
So Roy, how are you creating the tables? What tool are you using?
1 Like
Hi @Cathy_Sarisky , I created and formatted the tables using MS Word and then took a screenshot 
I then inserted those images.
Before you switched to images? What’d you do?
I created the html using an online tool (perhaps html school) and then inserted it as an html embed. But for some reason, the post cut off the sides of the table.
Hi, had a moment to find an easy way of getting the HTML written for you for any table to be cut and paste into an HTML Card.
I used this tool to create the following from which I’ve taken the following screenshots. I used Excel to create the table and used cut and paste from that to enter that info into the box for the table data which appears just above the “Generate” button. You can also import using the menu higher up (use File). You can even change the appearance of the table which gets included in the css (use the Theme button).
And note how the 2nd —> 4th column titles have been treated - the columns in the original Excel sheet were all the width of each title. Conversely, the ‘questions’ in the 1st column have not been ‘wrapped’. I’m not good enough at coding to understand how that’s been achieved by this tool: accident or coded?
The second image is of a page I created on my test site using the generated code in an HTML card.
2 Likes
Thanks for this @Coolcmsc. This helped me create tables easily :) I tried it but then went back to the image solution because the html tables were not being displayed properly on smaller devices.
2 Likes