Title: Global CSS for Mobile Formatting
Last modified: December 3, 2022

---

# Global CSS for Mobile Formatting

 *  Resolved [ryanjohn1617](https://wordpress.org/support/users/ryanjohn1617/)
 * (@ryanjohn1617)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/global-css-for-mobile-formatting/)
 * Hi,
 * I’m planning on using many tables, but I need them to all hide the same columns
   when on a mobile device. Is there CSS that can be added (maybe under plugin options?)
   to do this without having to add for each individual table?
 * Thank you very much for your help!

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Thread Starter [ryanjohn1617](https://wordpress.org/support/users/ryanjohn1617/)
 * (@ryanjohn1617)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/global-css-for-mobile-formatting/#post-16257876)
 * *Not hide the columns but instead collapse
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/global-css-for-mobile-formatting/#post-16257899)
 * Hi,
 * thanks for your post, and sorry for the trouble.
 * Do you mean the `collapse` mode of the TablePress Responsive Tables Extension
   from [https://tablepress.org/extensions/responsive-tables/](https://tablepress.org/extensions/responsive-tables/)
   here?
    That will start collapsing the columns from right to left, by default.
   But that’s not what you want, right?
 * The collapsing columns are however configured in the “Custom Commands” text field
   on the table’s “Edit” screen, but that is not CSS code. Therefore using the “
   Custom CSS” text field on the “Plugin Options” screen will not help here, unfortunately.
 * The best solution without having to add a “Custom Command” to each table’s “Edit”
   screen would then be to use a small piece of custom PHP code and to inject that“
   Custom Command” via the `tablepress_datatables_parameters` filter hook, defined
   at [https://github.com/TablePress/TablePress/blob/1.14/controllers/controller-frontend.php#L332-L342](https://github.com/TablePress/TablePress/blob/1.14/controllers/controller-frontend.php#L332-L342)
 * Regards,
    Tobias
 *  Thread Starter [ryanjohn1617](https://wordpress.org/support/users/ryanjohn1617/)
 * (@ryanjohn1617)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/global-css-for-mobile-formatting/#post-16257913)
 * Hi Tobias,
 * Thank you for your quick response. I’m going to have 100+ tables (that will be
   changing quite often via csv bulk import) with seven columns and want to collapse
   the third, fourth, and fifth columns if on mobile so the table fits on the screen
   and shows the most important data.
 * I just took a look at the responsive extension you attached above and the collapse
   feature would work except for the default method of collapsing from right to 
   left.
 * Thanks for the tip about the PHP code. I’ll have to explore that a bit more. 
   Thanks for your help!
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/global-css-for-mobile-formatting/#post-16257925)
 * Hi,
 * thanks for the clarification!
 * Yes, the `collapse` mode should work best here then.
 * As for the PHP code, you could use something like
 *     ```
       // Change the priority of being hidden on mobile for the 3rd, 4th, and 5th column.
       add_filter( 'tablepress_datatables_parameters', 'ryanjohn1617_tablepress_collapse_config', 10, 4 );
       function ryanjohn1617_tablepress_collapse_config( $parameters, $table_id, $html_id, $js_options ) {
       	$parameters['custom_commands'] = '"columDefs": [ { "responsivePriority": 7, "targets": [ 2 ] }, { "responsivePriority": 8, "targets": [ 3 ] }, { "responsivePriority": 9, "targets": [ 4 ] } ]';
   
       	return $parameters;
       }
   
       // Turn on the responsive "collapse" mode by default, for all tables.
       add_filter( 'tablepress_table_render_options', 'ryanjohn1617_tablepress_render_options', 10, 2 );
       function ryanjohn1617_tablepress_render_options( $render_options, $table ) {
       	$render_options['responsive'] = 'collapse';
   
       	return $render_options;
       }
       ```
   
 * This will turn on the `collapse` mode for all tables, and change the priority
   of the 3rd, 4th, and 5th columns so that they are hidden first (if needed) on
   small screens (before the right-most columns are hidden). This follows the docs
   at [https://datatables.net/extensions/responsive/classes](https://datatables.net/extensions/responsive/classes)
   and [https://datatables.net/reference/option/columns.responsivePriority](https://datatables.net/reference/option/columns.responsivePriority)
 * Regards,
    Tobias

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Global CSS for Mobile Formatting’ 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/)

 * 4 replies
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [3 years, 8 months ago](https://wordpress.org/support/topic/global-css-for-mobile-formatting/#post-16257925)
 * Status: resolved