Title: Table Width on mobile
Last modified: June 28, 2017

---

# Table Width on mobile

 *  Resolved [davetran](https://wordpress.org/support/users/davetran/)
 * (@davetran)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/table-width-on-mobile/)
 * Hi Tobias,
    Thanks for the great plugin. I have my table looking fine on desktop
   but on mobile the table is very narrow. I have enabled mobile scroll, but the
   columns are still very squished.
 * How can i alter the width of the mobile layout without affecting the desktop 
   view?
 * Thanks
    Dave

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/table-width-on-mobile/#post-9269392)
 * Hi,
 * thanks for your question, and sorry for the trouble.
 * One idea could be to prevent automatic line breaks in the table. For that, please
   add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
 *     ```
       .tablepress-id-123 {
         white-space: nowrap;
       }
       ```
   
 * where `123` needs to be changed to the correct table ID.
 * Regards,
    Tobias
 *  Thread Starter [davetran](https://wordpress.org/support/users/davetran/)
 * (@davetran)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/table-width-on-mobile/#post-9285898)
 * Thanks Tobias for your response.
    I have tried that, but that then affects the
   desktop view, the columns are now overly large.
 * Any other ideas?
 * Thanks
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/table-width-on-mobile/#post-9286003)
 * Hi,
 * 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
 *  Thread Starter [davetran](https://wordpress.org/support/users/davetran/)
 * (@davetran)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/table-width-on-mobile/#post-9286010)
 * [http://www.fieldgroup.com.au/xero-vs-myob-accounting-small-business/](http://www.fieldgroup.com.au/xero-vs-myob-accounting-small-business/)
   
   Thanks!
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/table-width-on-mobile/#post-9286061)
 * Hi,
 * thanks! As you are only using the “Horizontal Scrolling” checkbox in the DataTables
   features section on the table’s “Edit” screen, I’d here actually recommend to
   replace that with the `scroll` mode that the TablePress Extension from [https://tablepress.org/extensions/responsive-tables/](https://tablepress.org/extensions/responsive-tables/)
   offers. That might already do the trick here. So, please try unchecking the “
   Use DataTables” checkbox (as there’s no need for the library here then) and use
   that `scroll` mode as explained in the link above.
 * That might already lead to a better scrolling on small screens. If not, we can
   re-try the approach with disallowing automatic line breaks, but then do this 
   only on small screens, with this extended “Custom CSS” code:
 *     ```
       @media screen and (max-width: 768px) {
         .tablepress-id-1 {
           white-space: nowrap;
         }
       }
       ```
   
 * Regards,
    Tobias
 *  Thread Starter [davetran](https://wordpress.org/support/users/davetran/)
 * (@davetran)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/table-width-on-mobile/#post-9286248)
 * Hi Tobias. I instanlled the extension and updated the shortcode, disabling the
   datatables check box but had no luck. It just wouldn’t scroll even though i used
   [
   table id=1 responsive=scroll /]
 * I then tried your second method which worked, however it had the opposite effect.
   The columns were extremely wide because there was no set width.
 * I appreciate your help! If you can’t figure out any way around, that’s ok. I 
   am grateful for your help so far.
 * Dave
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/table-width-on-mobile/#post-9287874)
 * Hi Dave,
 * besides modifying the Shortcode, did you download, install, and activate the 
   TablePress Responsive Tables Extension as a plugin on your site?
 * Once we get that to work, a different CSS approach could be
 *     ```
       .tablepress-id-1 {
         min-width: 1000px;
       }
       ```
   
 * Regards,
    Tobias

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Table Width on mobile’ 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/)

## Tags

 * [mobile](https://wordpress.org/support/topic-tag/mobile/)
 * [table width](https://wordpress.org/support/topic-tag/table-width/)

 * 7 replies
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [8 years, 10 months ago](https://wordpress.org/support/topic/table-width-on-mobile/#post-9287874)
 * Status: resolved