Title: Table width on mobile view Last modified: August 24, 2016 --- # Table width on mobile view * Resolved [russclem](https://wordpress.org/support/users/russclem/) * (@russclem) * [11 years ago](https://wordpress.org/support/topic/table-width-on-mobile-view/) * Hi there, * The creators of the theme I have currently been using have been impressively useless with regards to an issue I have, so I thought I’d try your plugin as a workaround. * Basically, whenever I add tables, the theme’s own css messes things up in the mobile view, that’s in chrome on android. * So I decided to try to use your plugin, to see if it would solve the problem, and it looks like it has, but there’s one issue. You can see it if you visit [http://www.projectbase.eu](http://www.projectbase.eu) – in the Meet the Team section, on an android device. How can I make the table fit the screen? I’ve added the following code to the custom CSS, but it’s not helping… * .tablepress-id-1 { width: 40%; } * Where am I going wrong? * Many thanks for your time, and for your awesome plugin! * Russell * [https://wordpress.org/plugins/tablepress/](https://wordpress.org/plugins/tablepress/) Viewing 14 replies - 1 through 14 (of 14 total) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [11 years ago](https://wordpress.org/support/topic/table-width-on-mobile-view/#post-6141314) * Hi Russel, * thanks for your post, and sorry for the trouble. * Adjusting the width of the table is not really helping here, as the images will still stretch beyond that. We could however tell the browser to make the images fit. For that, please replace the current “Custom CSS” that you have with * ``` .tablepress-id-1 td { width: 50%; } .tablepress-id-1 img { max-width: 100%; } ``` * Regards, Tobias * Thread Starter [russclem](https://wordpress.org/support/users/russclem/) * (@russclem) * [11 years ago](https://wordpress.org/support/topic/table-width-on-mobile-view/#post-6141318) * Amazing, that’s fixed it! * Thanks so much! * Thread Starter [russclem](https://wordpress.org/support/users/russclem/) * (@russclem) * [11 years ago](https://wordpress.org/support/topic/table-width-on-mobile-view/#post-6141328) * Actually, before I speak to soon, further down the page, there’s another table in the Projects and Media sections. That all displays fine on a normal screen, but all gets bunched up on mobile view. * Where’ve I gone wrong? * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [11 years ago](https://wordpress.org/support/topic/table-width-on-mobile-view/#post-6141369) * Hi, * good to hear that this helped! * The table 2 is much trickier, and I can’t really offer a similarly easy solution 🙁 Basically, that table has a rather tricky structure, with a table inside a table, etc. I’m afraid that there’s simply no nice and easy way to display that nicely on a small screen – as we are confined to the row/column/cell structure of a table here. * If you split “Media” and “Projects” into two separate tables, the approach for table 1 might also work there. * Regards, Tobias * [claudejo](https://wordpress.org/support/users/claudejo/) * (@claudejo) * [11 years ago](https://wordpress.org/support/topic/table-width-on-mobile-view/#post-6141435) * Tobias, * Trying to adjust the width of the tables for mobile version but seemingly doing something wrong. * In the Plugin Options Custom CSS I currently have: .tablepress thead th, .tablepress tfoot th { background-color: #263548; color: #ffffff; } .tablepress-id-N tbody td { color: #ffffff; } * I added the following per your previous post but no change: .tablepress-id-1 td { width: 50%; } .tablepress-id-1 img { max-width: 100%; } * What am I doing wrong? Thanks! Claude * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [11 years ago](https://wordpress.org/support/topic/table-width-on-mobile-view/#post-6141440) * Hi Claude, * thanks for your post, and sorry for the trouble. * That code from above is a specific solution for russclem’s tables. It will not directly work with other tables. * Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks! * Regards, Tobias * [claudejo](https://wordpress.org/support/users/claudejo/) * (@claudejo) * [11 years ago](https://wordpress.org/support/topic/table-width-on-mobile-view/#post-6141471) * Tobias, * Thanks for the reply. The page you can normally see the table on is the following: [http://www.claudejobin.com/ottawa-condos-for-sale/ottawa-central/sandy-hill/400-laurier-avenue-east/](http://www.claudejobin.com/ottawa-condos-for-sale/ottawa-central/sandy-hill/400-laurier-avenue-east/) The tables look fine on the desktop but in the mobile version of my site they dont currently adjust and so they overhang on the right side. * You might need to wait a bit because last night as I was formating walkscore suddenly the website went down and my web hosters are still figuring it out ( 500 – Internal Server Error) [https://www.walkscore.com/professional/get-code/free/78f8194c8bb249da9c707ffec4bb5923](https://www.walkscore.com/professional/get-code/free/78f8194c8bb249da9c707ffec4bb5923) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [11 years ago](https://wordpress.org/support/topic/table-width-on-mobile-view/#post-6141475) * Hi, * then you could be affected by the general problem of making tables responsive. Depending on your table, you could try the TablePress Responsive Tables Extension from [http://tablepress.org/extensions/responsive-tables/](http://tablepress.org/extensions/responsive-tables/) or the horizontal scrolling approach from [https://wordpress.org/support/topic/responsive-tables-scroll-only?replies=6#post-5511954](https://wordpress.org/support/topic/responsive-tables-scroll-only?replies=6#post-5511954) * And you are right, I’m getting a 500 Internal Server Error. I’d suggest that you notify me here once the site is working again, and maybe try the ideas from above. * Regards, Tobias * [claudejo](https://wordpress.org/support/users/claudejo/) * (@claudejo) * [11 years ago](https://wordpress.org/support/topic/table-width-on-mobile-view/#post-6141527) * Tobias, * The website is now fixed: [http://www.claudejobin.com/ottawa-condos-for-sale/ottawa-central/sandy-hill/400-laurier-avenue-east/](http://www.claudejobin.com/ottawa-condos-for-sale/ottawa-central/sandy-hill/400-laurier-avenue-east/) * In addition to the adjustment to mobile (which I’ve never had) why are the tables showing up blue now they used to match the theme. Perhaps I need to specify colour in the css of the table. * Thanks! Claude * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [11 years ago](https://wordpress.org/support/topic/table-width-on-mobile-view/#post-6141531) * Hi Claude, * the problem with mobile screens basically is that there’s too much content in the table for it to fit on small screens. This is a general issue with tables on the web, due to their fixed columns/rows structure. Some ideas for this are to flip the table to the side and make it horizontally scrollable, which is possible with the TablePress Extension from [http://tablepress.org/extensions/responsive-tables/](http://tablepress.org/extensions/responsive-tables/) A simpler idea, scrolling without flipping could be the approach from [https://wordpress.org/support/topic/responsive-tables-scroll-only?replies=6#post-5511954](https://wordpress.org/support/topic/responsive-tables-scroll-only?replies=6#post-5511954) or simply enabling the “Horizontal Scrolling” checkbox on the “Edit” screen of the table. * For the colors: That light blue is the default for TablePress tables (from the plugin’s default CSS file). Changing that is possible with some “Custom CSS”, e.g. from [http://tablepress.org/faq/change-background-color-table-head-row/](http://tablepress.org/faq/change-background-color-table-head-row/) * Regards, Tobias * [claudejo](https://wordpress.org/support/users/claudejo/) * (@claudejo) * [11 years ago](https://wordpress.org/support/topic/table-width-on-mobile-view/#post-6141544) * Tobias, * First of all thank you for your help. Remind me how I can make a donation supporting your work in this endeavour. I didn’t try the extension you suggested (I suppose I could) I did the check mark on Enable horizontal scrolling but only my content is scrolling (nice) without the header (less good). Is it me? Thanks again! Claude * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [11 years ago](https://wordpress.org/support/topic/table-width-on-mobile-view/#post-6141545) * Hi, * thanks for wanting to donate, I really appreciate that! For details on that, please see [http://tablepress.org/donate/](http://tablepress.org/donate/) * Now, for the horizontal scrolling, I just checked the tables on [http://www.claudejobin.com/ottawa-condos-for-sale/ottawa-central/sandy-hill/400-laurier-avenue-east/](http://www.claudejobin.com/ottawa-condos-for-sale/ottawa-central/sandy-hill/400-laurier-avenue-east/) in the emulator in Google Chrome and everything is scrolling fine (both the table header and the table body). Which table is not working correctly for you? * Regards, Tobias * [claudejo](https://wordpress.org/support/users/claudejo/) * (@claudejo) * [11 years ago](https://wordpress.org/support/topic/table-width-on-mobile-view/#post-6141551) * Tobias, * The page I was looking at is: * [http://www.claudejobin.com/ottawa-condos-for-sale/ottawa-central/sandy-hill/400-laurier-avenue-east/](http://www.claudejobin.com/ottawa-condos-for-sale/ottawa-central/sandy-hill/400-laurier-avenue-east/) * And suddenly it’s working. So you must have worked your magic. Thanks! Claude * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [11 years ago](https://wordpress.org/support/topic/table-width-on-mobile-view/#post-6141552) * Hi, * great! Thanks for the confirmation! Probably some temporary caching issue then 🙂 * Best wishes, Tobias Viewing 14 replies - 1 through 14 (of 14 total) The topic ‘Table width on mobile view’ 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/) * 14 replies * 3 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [11 years ago](https://wordpress.org/support/topic/table-width-on-mobile-view/#post-6141552) * Status: resolved