About design and nearby

Responsive Tables for Mobile Devices

Posted: August 14th, 2016 | Author: | Filed under: Development, Mobile Design and Development, Tips and Tricks | Tags: , , , , , , , | No Comments »

You have a great website with responsive design and number of tables which fit the smaller viewports well.. say, like described in my post Responsive Tables. Every table has horizontal scroll for mobile-sized view, without breaking layout. It happens because of CSS settings for the table ‘display:block;’ and ‘overflow-x:auto;’. A user can swipe right and left to horizontal scroll the table to see the content.
A bad news is the user has no indication that they can swipe to the right (the momentum effect) – many mobile browsers don’t show scrollbars at all, while some show them only while scrolling…

The solution is to use

  1.  overflow-x: scroll; /* instead of 'auto' */
  2.  -webkit-overflow-scrolling: touch;


and even add custom scrollbar (for Chrome at least):

  1. ::-webkit-scrollbar-track {
  2.   background-color: #F5F5F5;
  3. }
  4. ::-webkit-scrollbar {
  5.   width: 12px;
  6.   background-color: rgba(0,0,0,0);
  7. }
  8. ::-webkit-scrollbar:hover {
  9.   background-color: rgba(0, 0, 0, 0.09);
  10. }
  11. ::-webkit-scrollbar-thumb {
  12.   background: rgba(0, 0, 0, 0.3);
  13.   border: 2px solid #F5F5F5;
  14.   -webkit-border-radius: 100px;
  15. }
  16. ::-webkit-scrollbar-thumb:active {
  17.   background: rgba(0,0,0,0.61);
  18.   -webkit-border-radius: 100px;
  19. }

tables with scrolling for mobile devices

The above is a must if you design for mobile devices and produce applications using WebViews.

Share Button

Check Related Posts:


Leave a Reply


  • 4 − = three

Ready to contact a Freelance UI & UX designer for your project? I’m ready to jump onboard!

Let's discuss your project now