Title: Custom Column Widths
Last modified: August 22, 2016

---

# Custom Column Widths

 *  Resolved [tedballantine](https://wordpress.org/support/users/tedballantine/)
 * (@tedballantine)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/custom-column-widths/)
 * I have entered custom CSS to change the column widths to the width I want them.
 * However, when I filter the columns, the CSS appears to get overridden somehow
   and the column width changes.
 * Link here:
 * [http://pension360.org/salary-database/](http://pension360.org/salary-database/)
 * The custom CSS was as follows:
 *     ```
       .tablepress-id-2 .column-1 {
       	width: 75px;
       	text-align: center;
       }
   
       .tablepress-id-2 .column-2 {
       	width: 75px;
       	text-align: center;
       }
   
       .tablepress-id-2 .column-3 {
       	width: 150px;
       	text-align: center;
       }
   
       .tablepress-id-2 .column-4 {
       	width: 150px;
       	text-align: center;
       }
   
       .tablepress-id-2 .column-5 {
       	width: 75px;
       	text-align: center;
       }
       ```
   
 * Any idea what the solution for this is?
 * [https://wordpress.org/plugins/tablepress/](https://wordpress.org/plugins/tablepress/)

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

 *  [funcolors](https://wordpress.org/support/users/funcolors/)
 * (@funcolors)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/custom-column-widths/#post-5366621)
 * I have a very similar issue and am looking for a solution as well.
 * Setting column width, row height and overall table size seems to be particularly
   difficult in TablePress; more than one post on this topic in support forum and
   each seems to have had a different resolution.
 * Here’s mine. Table too big, columns too wide. [http://campchroma.com/color-notation-database/](http://campchroma.com/color-notation-database/)
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/custom-column-widths/#post-5366640)
 * Hi,
 * thanks for your question, and sorry for the trouble.
 * Both of you are not really suffering from drawbacks or issues in TablePress, 
   but from how tables work in HTML in general. The width of a column will always
   be determined by the content in the cells. That is, one can never reduce width
   of a column beyond what the content requires.
 * tedballantine, in your case, the value of 75px is simply to small. The text in
   the cells requires more width than that. Now, I just checked your table, and 
   don’t really see why you would want to change the widths at all… What exactly
   don’t you like regarding the widths?
 * funcolors, what exactly do you want to change? Changing column widths should 
   work fine. To reduce the width of the table in general, you could tell the browser
   to not extend the table to the full page width with this:
 *     ```
       .tablepress-id-1 {
         width: auto !important;
       }
       ```
   
 * For the row height, you would need to reduce the padding (white space between
   the text in the cells and the row edges), but I wouldn’t recommend that, as thing
   would become too squeezed.
    Also, there’s a small issue in the HTML code of that
   page, namely the `[table id=1 /]` Shortcode is wrapped in HTML `<pre>` tags. 
   Those can influence the design. To fix this, please go to the “Edit” screen of
   the page, and switch from the “Visual” to the “Text” editor. There, remove the`
   <pre>` and `</pre>` around the Shortcode, so that there’s only the Shortcode 
   on its own line.
 * Regards,
    Tobias
 *  Thread Starter [tedballantine](https://wordpress.org/support/users/tedballantine/)
 * (@tedballantine)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/custom-column-widths/#post-5366662)
 * Thanks for the answer, Tobias.
 * In my case, I adjusted the width of the column for purely aesthetic purposes.
 * However, I just checked in Chrome and my problem does not present itself when
   using Chrome (that is, in Chrome the width of my columns do not change when use
   the sort feature).
 * So, perhaps my issue is also Firefox.
 *  [funcolors](https://wordpress.org/support/users/funcolors/)
 * (@funcolors)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/custom-column-widths/#post-5366667)
 * Hi Tobias,
 * With info from tedballantine’s post and yours, it’s looking better. I believe
   you are right that the extra tags were creating problems.
 * Thanks.
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/custom-column-widths/#post-5366702)
 * Hi,
 * funcolors, yes, your table looks much better now!
 * tedballantine, the issue with Firefox is that it tries to make all columns equally
   wide, as you set all columns to 75 pixels. Instead, I suggest to only reduce 
   the widths of e.g. the first two columns. That would give the browser the flexibility
   to leave the other columns big, so that there will be less side effects. Also,
   your CSS can be made a little bit more efficient and shorter:
 *     ```
       .tablepress-id-2 th,
       .tablepress-id-2 td {
       	text-align: center;
       }
       .tablepress-id-2 .column-1,
       .tablepress-id-2 .column-2 {
       	width: 100px;
       }
       ```
   
 * Regards,
    Tobias

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

The topic ‘Custom Column Widths’ 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/)

 * 5 replies
 * 3 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [11 years, 7 months ago](https://wordpress.org/support/topic/custom-column-widths/#post-5366702)
 * Status: resolved