Title: Make Table Width Smaller
Last modified: August 20, 2016

---

# Make Table Width Smaller

 *  Resolved [SocialSparkMedia](https://wordpress.org/support/users/socialsparkmedia/)
 * (@socialsparkmedia)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/make-table-width-smaller/)
 * I would like to make the size of this table smaller. I have read and followed
   your advice to a number of different users, with no luck. I’m guessing it’s something
   in my theme, but I don’t know how to figure that out. Here’s the code I’ve added:
 *     ```
       .tablepress thead th,
       .tablepress tfoot th {
       	background-color: #BDCEF4;
       }
       .tablepress th,
       .tablepress td {
       	text-align: center;
       	padding: 2px;
       }
       .tablepress-id-1 {
       	width: auto;
       }
       .tablepress-id-1 .column-1 {
       	width: 100px;
       }
       .tablepress-id-1 .column-2 {
       	width: 75px;
       }
       .tablepress-id-1 .column-3 {
       	width: 75px;
       }
       ```
   
 * On the Width: auto line “auto” is in red, indicating it’s not an available choice?
   Same for “center”. I tried typing a number in, but that didn’t change the size
   of the table either. I just want the table columns to be closer in size to the
   contents, and not have so much white space. Also, to line up with the size of
   the doc embedded above it.
 * Another weird thing is that when I open the custom css window, the lines under“
   width: auto” are not visible until I click somewhere and make a change (like 
   delete a space or something). Not really affecting my code, but it’s some kind
   of glitch. Using Firefox.
 * My table is on this page: [http://palmettoskateclub.com/calendar/freestyle-schedule/](http://palmettoskateclub.com/calendar/freestyle-schedule/)
 * Thanks in advance for your help!
    Fran
 * [http://wordpress.org/extend/plugins/tablepress/](http://wordpress.org/extend/plugins/tablepress/)

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

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/make-table-width-smaller/#post-3524099)
 * Hi Fran,
 * thanks for your post, and sorry for the trouble!
 * You are right, your theme also contains some CSS code that influences the table,
   and especially the width. To change that, we’ll just have to raise the priority
   of your CSS, and actually just for one line. Please replace
 *     ```
       .tablepress-id-1 {
       	width: auto;
       }
       ```
   
 * with
 *     ```
       #wrapper .tablepress-id-1 {
       	width: auto;
       }
       ```
   
 * That should make your table more narrow, and the table will then obey the individual
   column widths that you are setting.
 * And don’t worry too much about the color of the strings, like “auto” or “center”.
   This is supposed to be some sort of help on the syntax of the code, but unfortunately,
   the external JavaScript library that is used for this does not know all possible
   strings in all contexts of where they can be used. So, basically, you can ignore
   the coloring of these words. They do not influence the code in any way.
    And 
   I’ve also noticed that glitched with the lower lines of text in that field not
   being visible until clicking into the textfield. This is also related to that
   external JS library, and I hope that it will be fixed in one of the next releases
   of that library.
 * Regards,
    Tobias
 *  Thread Starter [SocialSparkMedia](https://wordpress.org/support/users/socialsparkmedia/)
 * (@socialsparkmedia)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/make-table-width-smaller/#post-3524104)
 * Tobias, that is perfect!
    (…and boy are you FAST!)
 * Is there a simple way that you can tell me how you found the #wrapper id was 
   the culprit? I use several different WooThemes, and I imagine they will all have
   a similar problem. Your plugin is good and I’m sure I’ll need it again, I’d like
   to be able to troubleshoot without bothering you again.
 * I’ll be sure to rate the plugin, and contribute to your efforts via PayPal. 🙂
   
   Thanks again. Fran
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/make-table-width-smaller/#post-3524114)
 * Hi Fran,
 * great to hear that this worked! 🙂
 * Well, technically it’s not the `#wrapper` that was missing. It just comes in 
   handy when we want to give our CSS precedence over the theme CSS.
 * To find this, I use the Developer Tools in Google Chrome. With that, I saw that
   the theme CSS has the priority. Usually, it is then enough to just use the same
   CSS selector as the theme, but with our desired values. As the CSS selector here
   is rather complex, I decided to use a simpler one, and (again with the Developer
   Tools) I found that the `#wrapper` will work nicely, as it is a CSS element that
   is part of every page of your site, and that has a higher priority.
 * A similar method would have been to use the `!important` keyword, as in
 *     ```
       .tablepress-id-1 {
       	width: auto !important;
       }
       ```
   
 * That would also have given priority to our CSS command, over that of theme.
 * And thanks for wanting to donate, I really appreciate it!
 * Best wishes,
    Tobias
 *  [Siebren](https://wordpress.org/support/users/siebren/)
 * (@siebren)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/make-table-width-smaller/#post-3524444)
 * Hi Tobias,
 * I can not get my 4th column in the good width… Also how do I get the table located
   in the center beneath the text? With the normal tool of wordpress I can not get
   this done!
 * My url is: [http://www.reclamelangsderails.nl](http://www.reclamelangsderails.nl)
 * Thanks in advance!
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/make-table-width-smaller/#post-3524445)
 * Hi,
 * thanks for your post, and sorry for the trouble.
 * There’s a small typo in your CSS. Also, you should add the table ID to the CSS
   selector, so that it only affects one table at a time.
    Please change this
 *     ```
       .tablepress-id-1 {
       	width: auto !important;
       }
   
       .tablepress .column-1 {
       	width: 100px;
       }
   
       .tablepress .column-2 {
       	width: 100px;
       }
   
       .tablepress .column-3 {
       	width: 100x;
       }
   
       .tablepress .column-4 {
       	width: 100x;
       }
       ```
   
 * to
 *     ```
       .tablepress-id-1 {
       	width: auto !important;
       	margin: 0 auto 1em;
       }
       .tablepress-id-1 .column-1,
       .tablepress-id-1 .column-2,
       .tablepress-id-1 .column-3,
       .tablepress-id-1 .column-4 {
       	width: 100px;
       }
       ```
   
 * Regards,
    Tobias
 *  [JGravesNBS](https://wordpress.org/support/users/jgravesnbs/)
 * (@jgravesnbs)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/make-table-width-smaller/#post-3524446)
 * Hi socialsparkmedia
 * What plugin are you using for:
 * Freestyle Schedule and Club Calendar
 * [http://palmettoskateclub.com/calendar/freestyle-schedule/](http://palmettoskateclub.com/calendar/freestyle-schedule/)
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/make-table-width-smaller/#post-3524447)
 * Hi,
 * from what I can see, that’s simply an embedded Google Calendar, from [http://calendar.google.com](http://calendar.google.com).
 * Regards,
    Tobias
 *  [JGravesNBS](https://wordpress.org/support/users/jgravesnbs/)
 * (@jgravesnbs)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/make-table-width-smaller/#post-3524448)
 * Fantastic!
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/make-table-width-smaller/#post-3524449)
 * Hi,
 * good to hear that this helped!
 * Regards,
    Tobias
 *  [mijumoto](https://wordpress.org/support/users/mijumoto/)
 * (@mijumoto)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/make-table-width-smaller/#post-3524459)
 * Hi Tobias,
 * Can you take a look at this one and tell me what’s wrong
 * Your efforts will be remunerated, have spent a lot of time with this already
 * Thanks
 * Mike
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/make-table-width-smaller/#post-3524460)
 * Hi Mike,
 * thanks for your post.
    I’m a little bit confused though. What do you want me 
   to take a look at? Did you maybe want to post a link?
 * Regards,
    Tobias

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

The topic ‘Make Table Width Smaller’ 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/)

## Tags

 * [table width](https://wordpress.org/support/topic-tag/table-width/)

 * 11 replies
 * 5 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [12 years, 3 months ago](https://wordpress.org/support/topic/make-table-width-smaller/#post-3524460)
 * Status: resolved