Title: Column Width (Responsive)
Last modified: November 24, 2022

---

# Column Width (Responsive)

 *  Resolved [Blair Geddes](https://wordpress.org/support/users/primalspace/)
 * (@primalspace)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/column-width-responsive/)
 * We’ve recently installed your plugin and have created several tables for the 
   same page of our site. However, we’re running into problems with the tables not
   showing fully on mobile.
 * We’re also looking to create equal column widths but the guidance provided for
   this on the FAQ is to set using PX sizing which won’t allow the table to load
   responsively across mobile and desktop.
 * Hoping you can you help us find a solution for this? Thanks.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcolumn-width-responsive%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [3 years, 6 months ago](https://wordpress.org/support/topic/column-width-responsive/#post-16233200)
 * Hi,
 * thanks for your post, and sorry for the trouble.
 * Let’s start with the column widths: Instead of using px values, you can of course
   also use other CSS units, like % here. In your case, please add this to the “
   Custom CSS” textarea on the “Plugin Options” screen of TablePress:
 *     ```
       .tablepress-id-1 th,
       .tablepress-id-1 td {
         width: 33.3%;
       }
       ```
   
 * This should give the table three equally wide columns.
 * Now, for responsiveness, just changing column widths will not work. Your table
   contains some long words, like “communications”, “Responsibilities”, and “exceptional”
   in adjacent columns. These then define the minimum width for each column, as 
   the browser will not add arbitrary word-wrapping in these words.
    Forcing this,
   could be one approach, e.g. by extending the CSS from above to
 *     ```
       .tablepress-id-1 th,
       .tablepress-id-1 td {
         width: 33.3%;
         word-break: break-word;
         hyphens: auto;
         -webkit-hyphens: auto;
       }
       ```
   
 * Alternatively, you could look into using approaches like scrolling, see [https://tablepress.org/extensions/responsive-tables/](https://tablepress.org/extensions/responsive-tables/)
 * Regards,
    Tobias

Viewing 1 replies (of 1 total)

The topic ‘Column Width (Responsive)’ 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/)

 * 1 reply
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [3 years, 6 months ago](https://wordpress.org/support/topic/column-width-responsive/#post-16233200)
 * Status: resolved