Title: Table overflow on mobile
Last modified: April 9, 2020

---

# Table overflow on mobile

 *  Resolved [samuelmarcinko](https://wordpress.org/support/users/samuelmarcinko/)
 * (@samuelmarcinko)
 * [6 years, 2 months ago](https://wordpress.org/support/topic/table-overflow-on-mobile/)
 * Hi guys, I want to ask. I’m using TablePress on website, on desktop version is
   everything okey, but on mobile because table has more columns I had to turn on
   scroll bar and swipe function. That’s great, but I want to add some overflow 
   shadows or something like this to tell a user that there is overflow content 
   and he can swipe for see it. I saw something what I need on codepen ( [https://codepen.io/ramiro-ruiz/pen/KKPmoaV](https://codepen.io/ramiro-ruiz/pen/KKPmoaV)).
   It’s just overflow shadows on sides of the table. Can you please help me with
   that? I tried to create custom class in settings and write a CSS which I found
   online and then used it in table, but it’s not working. Thanks
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ftable-overflow-on-mobile%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [6 years, 2 months ago](https://wordpress.org/support/topic/table-overflow-on-mobile/#post-12653161)
 * Hi,
 * thanks for your post, and sorry for the trouble.
 * I played with this a bit, but the only way that I could make it look good was
   by turning off all background colors in the table rows.
    Then, you should turn
   off the “Horizontal Scrolling” checkbox on the table’s “Edit” screen and instead
   use the `scroll` mode of the TablePress Extension from [https://tablepress.org/extensions/responsive-tables/](https://tablepress.org/extensions/responsive-tables/)(
   because it adds this effect with just CSS).
 * Then, this “Custom CSS” should add the shadows:
 *     ```
       .tablepress-scroll-wrapper {
       	background-image: 
       		/* Shadows */ 
       		linear-gradient(to right, white, white),
       		linear-gradient(to right, white, white),
       		/* Shadow covers */ 
       		linear-gradient(to right, rgba(0,0,0,.25), rgba(255,255,255,0)),
       		linear-gradient(to left, rgba(0,0,0,.25), rgba(255,255,255,0));   
   
       	background-position: left center, right center, left center, right center;
       	background-repeat: no-repeat;
       	background-color: white;
       	background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
   
       	/* Opera doesn't support this in the shorthand */
       	background-attachment: local, local, scroll, scroll;
       }
       ```
   
 * Regards,
    Tobias

Viewing 1 replies (of 1 total)

The topic ‘Table overflow 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

 * [overflow](https://wordpress.org/support/topic-tag/overflow/)

 * 1 reply
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [6 years, 2 months ago](https://wordpress.org/support/topic/table-overflow-on-mobile/#post-12653161)
 * Status: resolved