Title: Layout width change Last modified: September 19, 2018 --- # Layout width change * Resolved [justin2016](https://wordpress.org/support/users/justin2016/) * (@justin2016) * [7 years, 8 months ago](https://wordpress.org/support/topic/layout-width-change/) * Hi, how do I change the width of the whole TablePress Layout in CSS? Please help me out on this: Thanks in advance * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Flayout-width-change%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 15 replies - 1 through 15 (of 24 total) 1 [2](https://wordpress.org/support/topic/layout-width-change/page/2/?output_format=md) [→](https://wordpress.org/support/topic/layout-width-change/page/2/?output_format=md) * [Growltiger](https://wordpress.org/support/users/growltiger/) * (@growltiger) * [7 years, 8 months ago](https://wordpress.org/support/topic/layout-width-change/#post-10703660) * 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. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [7 years, 8 months ago](https://wordpress.org/support/topic/layout-width-change/#post-10703710) * 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 * Thread Starter [justin2016](https://wordpress.org/support/users/justin2016/) * (@justin2016) * [7 years, 8 months ago](https://wordpress.org/support/topic/layout-width-change/#post-10706885) * 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: [](https://brattsinclaire.com/new/discography/) * 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%; } * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [7 years, 8 months ago](https://wordpress.org/support/topic/layout-width-change/#post-10708470) * 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 * Thread Starter [justin2016](https://wordpress.org/support/users/justin2016/) * (@justin2016) * [7 years, 8 months ago](https://wordpress.org/support/topic/layout-width-change/#post-10717420) * 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. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [7 years, 8 months ago](https://wordpress.org/support/topic/layout-width-change/#post-10719010) * 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 * Thread Starter [justin2016](https://wordpress.org/support/users/justin2016/) * (@justin2016) * [7 years, 8 months ago](https://wordpress.org/support/topic/layout-width-change/#post-10719320) * Here’s the link Thanks! [https://brattsinclaire.com/new/discography/](https://brattsinclaire.com/new/discography/) [](https://brattsinclaire.com/new/discography/) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [7 years, 8 months ago](https://wordpress.org/support/topic/layout-width-change/#post-10719372) * 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 * Thread Starter [justin2016](https://wordpress.org/support/users/justin2016/) * (@justin2016) * [7 years, 8 months ago](https://wordpress.org/support/topic/layout-width-change/#post-10750669) * 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. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [7 years, 8 months ago](https://wordpress.org/support/topic/layout-width-change/#post-10750819) * 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 * Thread Starter [justin2016](https://wordpress.org/support/users/justin2016/) * (@justin2016) * [7 years, 8 months ago](https://wordpress.org/support/topic/layout-width-change/#post-10753226) * Dear Tobias, thanks for your replay. * Please find the CSS screenshot ere: [](https://brattsinclaire.com/new/tobias-screenshot/) * [https://brattsinclaire.com/new/tobias-screenshot/](https://brattsinclaire.com/new/tobias-screenshot/) * Thanks. Justin * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [7 years, 8 months ago](https://wordpress.org/support/topic/layout-width-change/#post-10753243) * 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 * Thread Starter [justin2016](https://wordpress.org/support/users/justin2016/) * (@justin2016) * [7 years, 8 months ago](https://wordpress.org/support/topic/layout-width-change/#post-10753299) * Dear Tobias, * thanks for your suggestion. It worked very well indeed! Check it here: [https://brattsinclaire.com/new/discography/](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. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [7 years, 8 months ago](https://wordpress.org/support/topic/layout-width-change/#post-10753419) * 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 * Thread Starter [justin2016](https://wordpress.org/support/users/justin2016/) * (@justin2016) * [7 years, 8 months ago](https://wordpress.org/support/topic/layout-width-change/#post-10753446) * Tobias, thanks. Please check the following link: [http://sinclairestyle.com/web/catalog/](http://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/](https://brattsinclaire.com/new/discography/) * but I cannot get it. Thanks again. Sincerly Justin Viewing 15 replies - 1 through 15 (of 24 total) 1 [2](https://wordpress.org/support/topic/layout-width-change/page/2/?output_format=md) [→](https://wordpress.org/support/topic/layout-width-change/page/2/?output_format=md) The topic ‘Layout width change’ is closed to new replies. * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944) * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/) * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq) * [Support Threads](https://wordpress.org/support/plugin/tablepress/) * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/) * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/) * 24 replies * 3 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [7 years, 6 months ago](https://wordpress.org/support/topic/layout-width-change/page/2/#post-10944733) * Status: resolved