Title: Table Width Last modified: September 29, 2016 --- # Table Width * Resolved [lesquealer](https://wordpress.org/support/users/lesquealer/) * (@lesquealer) * [9 years, 8 months ago](https://wordpress.org/support/topic/table-width-20/) * Hi Tobias, * I searched the forums quite a while before asking this question. And thanks so much for the great product and outstanding support! I’ve tried several things to reduce the width of my table but nothing seems to work. The table is at [http://tennyhill.com/2016/09/29/testing-tablepress-calling-out-specific-table-with-shortcode/](http://tennyhill.com/2016/09/29/testing-tablepress-calling-out-specific-table-with-shortcode/) and I have the following Custom CSS: .tablepress thead th, .tablepress tfoot th { background-color: #000000; font-family: Arial; text-align: center; font- size: 11px; color: #FFFFFF; } * .tablepress .odd td { background-color: #FFFFFF; } * .tablepress .even td { background-color: #FFDA8C; } * .tablepress tbody td { font-family: Arial; font-size: 11px; color: #000000; } * .tablepress border tr, tbody td, thead th, tfoot th { border-collapse: collapse! important; border-top: 1px solid #000000 !important; border-bottom: 1px solid# 000000 !important; border-right: 1px solid #000000 !important; border-left: 1px solid #000000 !important; padding: 1px !important; border-color: #000000 !important;} * .tablepress { padding: 1px; } * .tablepress .column-2 { text-align: center; } * .tablepress-id-5 .column-1 { width: 50px !important; } * .tablepress-id-5 .column-2 { width: 50px !important; } * I am trying to get the columns to have the width of the widest text entry and then those two columns will determine the overall table width. Right now it’s about 3 or 4 times the width it should be. * Thanks so much in advance! * Cindy Viewing 15 replies - 1 through 15 (of 25 total) 1 [2](https://wordpress.org/support/topic/table-width-20/page/2/?output_format=md) [→](https://wordpress.org/support/topic/table-width-20/page/2/?output_format=md) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [9 years, 8 months ago](https://wordpress.org/support/topic/table-width-20/#post-8237512) * Hi, * thanks for your question, and sorry for the trouble. * Please try adding this “Custom CSS”: * ``` .entry-content .tablepress { width: auto; margin: 0 auto 1em; } ``` * That will basically tell the browser to use the widths for the columns as the table width, opposed to the table always stretching to full width. * Regards, Tobias * Thread Starter [lesquealer](https://wordpress.org/support/users/lesquealer/) * (@lesquealer) * [9 years, 8 months ago](https://wordpress.org/support/topic/table-width-20/#post-8239222) * Hi Tobias, * Thanks for the quick response- of course it fixed the problem! My new problem is I don’t want any of the text in cells to wrap – how is that accomplished? * Thank you again! * Cindy * Thread Starter [lesquealer](https://wordpress.org/support/users/lesquealer/) * (@lesquealer) * [9 years, 8 months ago](https://wordpress.org/support/topic/table-width-20/#post-8239302) * Hi Tobias, * Never mind, I figured it out! * All of my WP posts are going to have one of two table format options. Is my only choice to define one of the two choices (as just .tablepress) in Custom CSS and define any tables using the second choice as its own table ID in Custom CSS? Or is there a way to define two different table styles in CSS? * Thanks, * Cindy * [lenrapp](https://wordpress.org/support/users/lenrapp/) * (@lenrapp) * [9 years, 8 months ago](https://wordpress.org/support/topic/table-width-20/#post-8239682) * I have just gone into the table and on the first row I simply reduced the length of the text by hitting the return so the width is now where I need it to be. Apparently the text was effecting the width of the column, possibly because I copied the text from a website and pasted it in. * Had to be some formatting issue I would guess. Now I can play with the code again and see if that works. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [9 years, 8 months ago](https://wordpress.org/support/topic/table-width-20/#post-8240002) * Hi, * [@lesquealer](https://wordpress.org/support/users/lesquealer/): You could use“ Extra CSS classes” for this. For example, create “tablepress-styling-1” and “ tablepress-styling-2” (or whatever name you want) and paste this class into each table’s “Extra CSS classes” field, on the “Edit” screen. Then, you can use these CSS classes in your CSS, without having to use the ID based CSS selectors. * [@lenrapp](https://wordpress.org/support/users/lenrapp/): Your code * ``` .tablepress-id-12 .column-1 { padding: 100px; } ``` * doesn’t really make sense. The padding is the inner white space in a cell, i. e. the space between the text in the cell and the cell edge. Setting this to a high value would influence the column width, but in the desired way. For that, you’d simply use the `width` property, like `width: 100px;` The width does however indeed depend on the text in the cells. That is, the text in the cell, especially the long words, define the minimum column width. * Regards, Tobias * [lenrapp](https://wordpress.org/support/users/lenrapp/) * (@lenrapp) * [9 years, 8 months ago](https://wordpress.org/support/topic/table-width-20/#post-8240024) * Yes, I see that the text determined the width of the column’s. I have it set correctly now, but the extra css didn’t really do anything, I tried a number of different settings with no change. I will remove that extra code now since it look OK now. * Thanks again… * Len * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [9 years, 8 months ago](https://wordpress.org/support/topic/table-width-20/#post-8240066) * Hi Len, * sure, no problem! * Best wishes, Tobias * [chuckb74](https://wordpress.org/support/users/chuckb74/) * (@chuckb74) * [8 years, 11 months ago](https://wordpress.org/support/topic/table-width-20/#post-9200235) * Tobias I am having trouble setting my column widths as well. I am using WPRocket and it does some minifying and concantating (sp) SO I have done some file cleaning in my wp-content and downloaded and then deleted the files related to tablepress and I have cleared the cache to this plugin. * I have the following in the Custom CSS in the Plugin Options section: * .tablepress-id-2 th, .tablepress-id-2 td { border-left: 1px solid #cccccc; } * .tablepress-id-2 .column-1 { width: 100px; } * .tablepress-id-2 .column-2 { width: 100px; } * I do now hat least have a vertical border so the first part of the CSS seems to be working. * Here is my page: [http://chuckbarnes.com/locations/turquoise-place-condos-orange-beach-chuck-barnes-realtor/](http://chuckbarnes.com/locations/turquoise-place-condos-orange-beach-chuck-barnes-realtor/) * Thanks in advance for any assistance Sincerely CB * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 11 months ago](https://wordpress.org/support/topic/table-width-20/#post-9202515) * Hi Chuck, * ok, and what exactly do you want to change now? It seems that the table is already smaller now, as you reduced the overall table width to 50%? * If you want to control it via per-column commands only, please set the table width to `width: auto;` (where you now have the 50%). * Regards, Tobias * [bclab](https://wordpress.org/support/users/bclab/) * (@bclab) * [8 years, 11 months ago](https://wordpress.org/support/topic/table-width-20/#post-9286739) * Hi Tobias * I have some size problems too, and searched several size-related topics on this forum. I have created a test table on this page : [http://www.leschambresdesdames.com/partenaires/](http://www.leschambresdesdames.com/partenaires/)( see table in page bottom) * This table should be 600 px wide, with 2 columns 300 px each. I’ve tried several CSS directives in the Options screen to set this, but none of them works: the table expands to full page width. By the way, the height of the 1st row is also incorrect: the meteo widget should have 185 px height and is truncated. Could it be due to the meteo widget and/or the google map? Or Theme (Suffusion) behavior? * Here is the CSS : * .tablepress-id-3 .column-1 { width: 300px; } * .tablepress-id-3 .column-2 { width: 300px; } * .tablepress-id-3 .row-1 { height: 200px; } * I’m using firefox and tried to inspect the code, but I can’t see these CSS instructions in the code. It seems they are ignored (Please note that I’ve created another table with its CSS instructions and it works perfectly). * Thank you in advance for your support * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 11 months ago](https://wordpress.org/support/topic/table-width-20/#post-9287891) * Hi, * thanks for your question, and sorry for the trouble. * In addition to what you already have, please try adding this CSS: * ``` .entry .tablepress-id-3 { width: auto; } ``` * Regards, Tobias * [bclab](https://wordpress.org/support/users/bclab/) * (@bclab) * [8 years, 11 months ago](https://wordpress.org/support/topic/table-width-20/#post-9287967) * Thanks a lot for your quick answer! * It works fine! Still having problems with the height of the meteo widget, but your tip is an interesting clue. * Thanks again for your support! * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 11 months ago](https://wordpress.org/support/topic/table-width-20/#post-9288044) * Hi, * to fix this a little bit, you could also add * ``` .tablepress-id-3 .column-2 div br { display: none; } ``` * However, the remaining white space is caused by the CSS inside the widget, which we can not influence from the outside 🙁 * Regards, Tobias * [bclab](https://wordpress.org/support/users/bclab/) * (@bclab) * [8 years, 10 months ago](https://wordpress.org/support/topic/table-width-20/#post-9288154) * Well, this is nearly perfect! A small truncation remains in the bottom of the widget, but it’s not visible. As it stands, it will be OK. * Thanks for all your help. * B.C. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 10 months ago](https://wordpress.org/support/topic/table-width-20/page/2/#post-9288208) * Hi, * I might have found something to fix that: * ``` .tablepress-id-3 .column-2 div.normal { height: auto !important; } ``` * Regards, Tobias Viewing 15 replies - 1 through 15 (of 25 total) 1 [2](https://wordpress.org/support/topic/table-width-20/page/2/?output_format=md) [→](https://wordpress.org/support/topic/table-width-20/page/2/?output_format=md) The topic ‘Table Width’ 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 * [column width](https://wordpress.org/support/topic-tag/column-width/) * 25 replies * 8 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [8 years, 9 months ago](https://wordpress.org/support/topic/table-width-20/page/2/#post-9414396) * Status: resolved