Title: Table on Mobile Creates Extra Padding
Last modified: August 22, 2016

---

# Table on Mobile Creates Extra Padding

 *  Resolved [dmurphyca](https://wordpress.org/support/users/dmurphyca/)
 * (@dmurphyca)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/table-on-mobile-creates-extra-padding/)
 * Hi Tobias,
 * I’m trying to find a way to improve mobile experience with TablePress. I don’t
   like the format for the Responsive Extension because I only use 3 columns and
   some of my data inside is too long. So the regular TablePress appears better 
   on mobile devices than the Responsive version.
 * However, I’m dealing with a padding issue on mobile where the table runs slightly
   off the page to the right hand side. I have attached a screenshot to showcase
   this example. The table extends just past the normal layout of the site and then
   forces some white padding. Is there any way to account for this padding on mobile
   devices through some CSS?
 * [http://oi58.tinypic.com/25kn2a1.jpg](http://oi58.tinypic.com/25kn2a1.jpg)
 * Any help is greatly appreciated, thanks!
 * EDIT: Forgot to give the URL: commonagenda.co/2014
 * Best regards,
 * Daniel
 * [https://wordpress.org/plugins/tablepress/](https://wordpress.org/plugins/tablepress/)

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

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/table-on-mobile-creates-extra-padding/#post-5515263)
 * Hi,
 * thanks for your post, and sorry for the trouble.
 * We could reduce the padding a bit, but that’s probably not really going to help,
   as there will still be screen where things are wrong.
    Therefore, the better 
   approach might be to add Horizontal Scrolling (but without the Flipping as the
   Responsive Tables Extension offers it). Can you therefore maybe simply try to
   enable the “Horizontal Scrolling” checkbox on the table’s “Edit” screen?
 * Regards,
    Tobias
 *  Thread Starter [dmurphyca](https://wordpress.org/support/users/dmurphyca/)
 * (@dmurphyca)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/table-on-mobile-creates-extra-padding/#post-5515268)
 * Hi Tobias,
 * Thank you for the quick reply.
 * I enabled Horizontal Scrolling and that makes an interesting change. For the 
   data in the table it seems a little better to navigate around. However, the headers
   to the table are not scrollable and the final one “Locations” gets cut off to“
   Locati” on mobile.
 * Perhaps there’s a way to reduce the first column a bit more? The header is just
   2 characters “ID” and the contents are links with text of just 4 digits (e.g.
   3385) Yet that first column seems to take up a lot of room on mobile.
 * Let me know if you have any thoughts. Thanks again for the help!
 * Best,
 * Daniel
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/table-on-mobile-creates-extra-padding/#post-5515271)
 * Hi Daniel,
 * yes, let’s reduce the padding here. Please try adding this to the “Custom CSS”:
 *     ```
       .tablepress th,
       .tablepress td {
         padding: 6px 8px !important;
       }
       .tablepress th {
         padding-right: 20px !important;
       }
       ```
   
 * Regards,
    Tobias
 *  Thread Starter [dmurphyca](https://wordpress.org/support/users/dmurphyca/)
 * (@dmurphyca)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/table-on-mobile-creates-extra-padding/#post-5515272)
 * Hi Tobias,
 * That’s definitely putting it on the right track. It makes everything fit but 
   the first column is perhaps a tad too squeezed in so I’ll need to mess with the
   padding values. However, this code did create a strange “double” header where
   there are now thin boxes right below the header. I can even mouse over them and
   make the highlighting color appear. Anyway to remove this second row of headers?
 * Best,
 * Daniel
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/table-on-mobile-creates-extra-padding/#post-5515275)
 * Hi Daniel,
 * oh, indeed. To remove that, can you please also add this code?:
 *     ```
       .dataTables_scrollBody .tablepress th{
         padding:0px!important;
       }
       ```
   
 * Regards,
    Tobias
 *  Thread Starter [dmurphyca](https://wordpress.org/support/users/dmurphyca/)
 * (@dmurphyca)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/table-on-mobile-creates-extra-padding/#post-5515277)
 * Perfect! Thank you so much for the speedy help Tobias!
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/table-on-mobile-creates-extra-padding/#post-5515278)
 * Hi,
 * no problem, you are very welcome! 🙂 Good to hear that this helped!
 * Best wishes,
    Tobias

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

The topic ‘Table on Mobile Creates Extra Padding’ 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/)

 * 7 replies
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [11 years, 6 months ago](https://wordpress.org/support/topic/table-on-mobile-creates-extra-padding/#post-5515278)
 * Status: resolved