Layout width change

I came here to ask for help and saw a question I think I know the answer to! Try this:

#wrapper
.tablepress-id-N {
max-width: 800px;
}

N must be set to the table number.
The 800px is just an example.

Hi,

thanks for your post, and sorry for the trouble.

justin2016: In your case, this will not work as trivially. The reason for this is that the content in your table simply requires are larger width. Afterall, the content has to go somewhere.

I would actually recommend to stop setting widths for the individual columns on this page (which even add up to more than 100%), and instead reset the default behavior by adding this “Custom CSS”:

.tablepress tbody td,
.tablepress thead th {
	word-break: normal;
	word-wrap: normal;
	hyphens: none;
}

Regards,
Tobias

Hi thanks to Growltiger for kind help!
Tobias, thank you very much for your quick and kind reply on this matter.
I’ve tried your code but unfortunately nothing has changed:
I just cannot nor increase nor decrease the whole TablePress layout.
Here’s a different link for you to check out where I’m also having the same issue with TablePress:

Please also find below both my current Plugin custom CSS.
Please help me on this matter.
Thank you very much in advance
—————-
`.tablepress tbody td,
.tablepress thead th {
word-break: normal;
word-wrap: normal;
hyphens: none;
}

.tablepress thead th,
.tablepress tfoot th {
background-color: #F4F2C9;
}

.tablepress {
table-layout: fixed;
width: 100%;
}

Hi,

where exactly did you add this code? I don’t see it in the “Custom CSS” on the “Plugin Options” screen of TablePress.

Also, please leave out the last block of CSS, as that is not necessary.

Regards,
Tobias

Tobias,
that you very much for helping me on this issue. Very kind of you.

I put the code into custom CSS field in “Plugin options” in the WP/dashboard/TablePress at another site.

By the way, as per your last kind suggestion, when I cut off the last code’s part the whole layout shifts way left.

Please help me on this.
Thank you very much in advance.

Hi,

can you then please post a link to that page? If I don’t see it, I can’t investigate the page :-/

Regards,
Tobias

Here’s the link
Thanks!
https://brattsinclaire.com/new/discography/

Hi,

thanks for the link! For this table, I actually recommend to modify your CSS to

.tablepress tbody td,
.tablepress thead th {
	word-break: normal;
	word-wrap: normal;
	hyphens: none;
	padding: 8px 8px 8px 8px !important;
}

.tablepress thead th,
.tablepress tfoot th {
	padding: 8px 20px 8px 8px !important;
	background-color: #F4F2C9;
}

.tablepress {
	table-layout: fixed;
}

Regards,
Tobias

Dear Tobias,
thanks for your kind answer last week. I’ve been out of the studio lately and I just got back on this issue.
Unfortunately your code is mostly rejected by TablePress by the small red crossed circles on the left side of the CSS field.
I’d really like to add here un screen shot of such a multiple error but I guess that cannot be done by the above tools
Anyway, the error looks like:
Expected COLON at line 3, colon 3
Expected COLON at line 4, colon 3
Expected COLON at line 5, colon 3
Expected COLON at line 6, colon 3
Expected COLON at line 11, colon 3
Expected COLON at line 12, colon 3
Expected COLON at line 16, colon 3

I’ve been trying to save such CSS code but, of course, all this incorrect lines disappear after the save click.

Please would you help me on this issue.
Thank you very much in advance.

Hi,

the CSS code from my previous post is correct, so maybe something went wrong elsewhere.
A screenshot would indeed be great. Could you create on, upload it to e.g. imgur.com and post the link here?

Regards,
Tobias

Dear Tobias, thanks for your replay.

Please find the CSS screenshot ere:

https://brattsinclaire.com/new/tobias-screenshot/

Thanks.
Justin

Hi Justin,

thanks for the screenshot! I’m not sure, but it looks like there are some “weird” space characters in the code in your screenshot, somehow? (Those that are underlined with that red waved line, just before the words?)
Could you therefore please try removing the white space before the individual commands and then again add them by hitting the space bar on the keyboard?

Regards,
Tobias

Dear Tobias,

thanks for your suggestion. It worked very well indeed!
Check it here: https://brattsinclaire.com/new/discography/

By the chance, do you believe I could increase those 8px “padding” without altering the whole TablePress layout?
I’d like the table to look wider in the site page.
Thanks for your precious and kind help on this matter.
Very much appreciated here.
Justin.

Hi Justin,

good to hear that this helped fix the CSS issue!

Increasing the padding will not help here. In fact, the table is already stretching to 100% of the content area that the theme is giving to it. So, if you want the table to bee wider, you will actually have to increase that content width in the theme.
If you are lucky, your theme offers a “Full width” page template for this, if not, you’d have to modify the theme’s CSS code.

Regards,
Tobias

Tobias,
thanks.
Please check the following link: https://sinclairestyle.com/web/catalog/

Same catalog, same TablePress settings, same CSS but different site and different Layout.

I’d like to have the same wide TablePress also on: https://brattsinclaire.com/new/discography/

but I cannot get it.
Thanks again.
Sincerly
Justin