Table responsiveness on a small screen

Content responsiveness is an essential factor for any documentation. And tables can be hard to handle with the responsive design. There are a lot of things that influence the minimum width of the cell and the table, such as: the actual content minimum width, the paddings, the margins, the content styles, inline styles, etc. And probably, most of the tables won't fit the width of mobile devices, no matter how responsive they are. But what to do if it is necessary to use tables in your docs?

There are a lot of guides over the web, like this one: Responsive Data Tables | CSS-Tricks. They can help you achieve a more responsive table. But it is possible to make wide tables readable even on screens with small widths with minimum effort.

How To Implement

Add the overflow-x: auto; and display: block; declarations to the CSS rule for your table from the project style file. This will add a horizontal scroll bar to the table if the screen is too small to display the full content.

CSS Code

.responsive-table {
  overflow-x: auto;
  display: block;
}