Fitting large tables using horizontal scrollbar

Large tables are a real headache for responsive web design. Vertical alignment of columns will distort the core idea of positioning data in table. So, if the table contains more than two columns (e.g. pricing packages, comparison data, etc), there is no way to make it responsive.

So, the only solution is to put the table into the container element with limited width (device-width) and enable horizontal scrollbar for mobile browsers.

Container's overflow in horizontal X axis should be solved by the scroll bar.

container_selector {
    overflow-x: scroll;
    max-width: 100%;
}

Then we should make sure that webkit's scrollbars are visible and the user won't be confused viewing some part of the table.

That's why we color scrollbar background and set its sizes.

::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #265CFE; /*choose one of theme colors*/
  border-radius:3px;
 }

After we should style the thumb. It should have a different color.

 ::-webkit-scrollbar-thumb {
  background-color: #84FD1C; /*choose different color*/
  border-radius:3px;
  width: 3px;
 }

 

Type: 

Make my existing website responsive - request form

 
1 Start 2 Complete

If you don't have web development skills, just fill in the form below. Our specialists will make your website responsive.