How to make table responsive?

It’s not a secret that in modern world every step in design and web-world should be responsive! Web design tables can often cause a particular problem for designers due to their row based layout. Responsive is an extension for Data Tables that resolves that problem by optimising the table’s layout for different screen sizes through the dynamic insertion and removal of columns from the table.

THE FACT! Data Tables Generator by Supsystic automatically creates responsive tables. So you don’t need to activate for this any options, it will be responsive by default.

On the Settings tab of your plugin go to Design section and set your Responsive mode:

Responsive mode of Data Tables plugin

Data Tables plugin provides you:

    • Standart Responsive mode – in this mode if table content doesn’t fit all columns become under each other with one cell per row.

Data Tables Standart Pesponsive mode

    • Automatic column hiding – in this mode table columns will collapse from right to left if content does not fit to parent container width. After clicking on “+” icon and you will see сolumns that are not fitted:

Data Tables plugin Automatic column hiding

    • Horizontal scroll – in this mode scroll bar will be added if table overflows parent container width. View all table by scrolling:

Data Table Horizontal scroll

  • Disable responsivity. Enable this option and you will see the table without responsivity.

Do you want to check it? The elementary way to make table responsive is, of course, to make it with the help of Responsive Table Generator by Supsystic. Do you want to understand if your table is really responsive?

The easiest way – open it on tablets, laptops or cell phones.

If it’s not enough or you haven’t got such an ability – check if it has the next options:

  • Extend your responsive design to HTML tables
  • Full control over column visibility at breakpoints, or automatic visibility
  • Collapsed information from the table shown in a child row
  • Seamlessly integrates with DataTables
  • Works with Bootstrap, Foundation and other responsive CSS frameworks

Above this responsive table has another features. How to make table responsive? Make this points:

  • Columns that don’t fit into the available area are removed automatically
  • Classes can be used to specify which columns should be shown on particular devices.
  • DataTables’ child row API capabilities are used to show data from the hidden columns

and so on. Responsive data table not only looks good on different devices, but also hecks and adds all the statistics, can be easily changed and can be customized for your requirements!

Important! The other options, questions, and additional info you want – find the answers here!

Check out the info with FAQs, video tutorials and different kinds of asking pages, question-answer forums+general info and plans back on this page WordPress Data Tables Documentation.

NB for new users! Back to main page of WordPress Data Tables Generator. Look through the main tasks of our plugin, themes, variants and also some advice for installation.

Your responsive table examples and, of course, any type of data table (with comments, pictures and details) can be inserted into posts and pages with a simple shortcode (or a template function) that allows for the same table to be easily used across multiple pages. There’s also the option to export and import tables for sharing across sites. You can just copy it and insert into the place in the code of the page.

Data Table by Supsystic is perfectly capable to extend table functionality to your WordPress site. Trust us, that there is no need to go through other plugins, install the trial or even pro versions, wasting your time, money and efforts!

How to make WordPress table responsive? Install Data Table Generator by Supsystic! It’s very easy and guarantees you the best result with no special efforts, some additional knowledge etc.

Categories
Related Articles
Latest Articles
Get plugins bundle today and save over 80%