Title: Column Width & Vertical Alignment Last modified: August 20, 2016 --- # Column Width & Vertical Alignment * Resolved [nofxbam](https://wordpress.org/support/users/nofxbam/) * (@nofxbam) * [13 years, 3 months ago](https://wordpress.org/support/topic/column-width-vertical-alignment/) * Hi, * I’ve been reading the forums for tips and have tried a few methods but I’m still having trouble with column width and vertical alignment. It could be my theme is interfering but I wanted to check. Here is the page (table under computer image): [http://www.agilebts.com/zoho-crm-test/](http://www.agilebts.com/zoho-crm-test/) * Here is the custom css I’m using: * .tablepress thead th, .tablepress tfoot th { background-color: #ffffff; } * .tablepress-id-1, .tablepress-id-1 tr, .tablepress-id-1 tbody td, .tablepress- id-1 thead th, .tablepress-id-1 tfoot th { border: none; } * .tablepress-id-1 .column-1 td { vertical-align: middle; width: 25px; padding: 0; } * .tablepress-id-1 .column-2 td { vertical-align: middle; width: 50px; padding: 0; } * .tablepress-id-1 .column-3 td { vertical-align: middle; width: 25px; padding: 0; } * .tablepress-id-1 .column-4 td { vertical-align: middle; width: 50px; padding: 0; } * Are you seeing anything wrong with the code I have listed above? * [http://wordpress.org/extend/plugins/tablepress/](http://wordpress.org/extend/plugins/tablepress/) Viewing 15 replies - 1 through 15 (of 20 total) 1 [2](https://wordpress.org/support/topic/column-width-vertical-alignment/page/2/?output_format=md) [→](https://wordpress.org/support/topic/column-width-vertical-alignment/page/2/?output_format=md) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 3 months ago](https://wordpress.org/support/topic/column-width-vertical-alignment/#post-3500717) * Hi, * thanks for your post, and sorry for the trouble. * The main problem, that I see, is that in your “Custom CSS” the `td` is written as a child of the `.column-123` selectors, when it actually is that selector. So, with that, the selector needs to be * ``` .tablepress-id-1 .column-1 { ``` * instead of * ``` .tablepress-id-1 .column-1 td { ``` * Additionally, you can do some optimizations, so that I recommend to try this as your full “Custom CSS”: * ``` .tablepress-id-1, .tablepress-id-1 tr, .tablepress-id-1 tbody td, .tablepress-id-1 thead th, .tablepress-id-1 tfoot th { border: none; } .tablepress-id-1 { width: auto; } .tablepress-id-1 img { margin: 0; } .tablepress-id-1 .column-1, .tablepress-id-1 .column-3 { width: 35px; vertical-align: middle; } .tablepress-id-1 .column-2, .tablepress-id-1 .column-4 { width: 50px; } ``` * Regards, Tobias * Thread Starter [nofxbam](https://wordpress.org/support/users/nofxbam/) * (@nofxbam) * [13 years, 3 months ago](https://wordpress.org/support/topic/column-width-vertical-alignment/#post-3500742) * Thank you for your quick response and being so helpful! * Thread Starter [nofxbam](https://wordpress.org/support/users/nofxbam/) * (@nofxbam) * [13 years, 3 months ago](https://wordpress.org/support/topic/column-width-vertical-alignment/#post-3500748) * I have another question. How can I add more space between the 2nd and 3rd columns? * There’s a second table below the first one I created that I want to space out a little. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 3 months ago](https://wordpress.org/support/topic/column-width-vertical-alignment/#post-3500783) * Hi, * good to see that this worked! 🙂 * To space those columns out a little bit, I recommend to add some padding to the left of the third column, with this: * ``` .tablepress-id-2 .column-3 { padding-left: 20px; } ``` * Regards, Tobias * Thread Starter [nofxbam](https://wordpress.org/support/users/nofxbam/) * (@nofxbam) * [13 years, 3 months ago](https://wordpress.org/support/topic/column-width-vertical-alignment/#post-3500832) * OK that definitely moved the column start over which is good. When I did that, it made the spacing between the rows wider however and also added a little more space in between columns 1,2 and 3,4. Here is my current code: * ``` .tablepress-id-1, .tablepress-id-1 tr, .tablepress-id-1 tbody td, .tablepress-id-1 thead th, .tablepress-id-1 tfoot th { border: none; color: #000000; } .tablepress-id-1 { width: auto; } .tablepress-id-1 img { margin: 0; } .tablepress-id-1 .column-1, .tablepress-id-1 .column-3 { width: 20px; vertical-align: middle; padding: 0; } .tablepress-id-1 .column-2, .tablepress-id-1 .column-4 { width: 135px; vertical-align: middle; } .tablepress-id-2, .tablepress-id-2 tr, .tablepress-id-2 tbody td, .tablepress-id-2 thead th, .tablepress-id-2 tfoot th { border: none; color: #000000; } .tablepress-id-2 { width: auto; } .tablepress-id-2 img { margin: 0; } .tablepress-id-2 .column-1, { width: 20px; vertical-align: middle; } .tablepress-id-2 .column-3 { width: 20px; vertical-align: middle; padding-left: 75px; } .tablepress-id-2 .column-2, .tablepress-id-2 .column-4 { width: 150px; vertical-align: middle; } ``` * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 3 months ago](https://wordpress.org/support/topic/column-width-vertical-alignment/#post-3500834) * Hi, * first: No need to post your “Custom CSS”, I can see that in the page 🙂 * One minor thing: Please remove the comma in * ``` .tablepress-id-2 .column-1, { ``` * That is obsolete and could interfere. * So, is everything how you want it now? Or is there still something that you want to change? * Regards, Tobias * Thread Starter [nofxbam](https://wordpress.org/support/users/nofxbam/) * (@nofxbam) * [13 years, 3 months ago](https://wordpress.org/support/topic/column-width-vertical-alignment/#post-3500847) * OK that may have worked. How do I shorten the distance between the rows? They’re just a little too spaced out at the moment. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 3 months ago](https://wordpress.org/support/topic/column-width-vertical-alignment/#post-3500848) * Hi, * for that, I recommend to remove the bottom padding for the cells: * ``` .tablepress-id-2 tbody td { padding-bottom: 0px; } ``` * Regards, Tobias * Thread Starter [nofxbam](https://wordpress.org/support/users/nofxbam/) * (@nofxbam) * [13 years, 3 months ago](https://wordpress.org/support/topic/column-width-vertical-alignment/#post-3500865) * Awesome! * OK I think I’m all set now. Thank you for all of your help and patience with a newbie. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 3 months ago](https://wordpress.org/support/topic/column-width-vertical-alignment/#post-3500866) * Hi, * sure, no problem! You are very welcome! * Best wishes, Tobias * P.S.: In case you haven’t, please [rate TablePress](http://wordpress.org/support/view/plugin-reviews/tablepress) here in the plugin directory. Thanks! * [nycnml](https://wordpress.org/support/users/nycnml/) * (@nycnml) * [13 years, 3 months ago](https://wordpress.org/support/topic/column-width-vertical-alignment/#post-3500893) * Hi Tobias, * I’ve read this thread and found it very helpful. I’m trying to follow along, and implement what i need for my site. I am trying to align all the images in the table to the bottom. That string of CSS I don’t seem to be able to ascertain. * My table can be seen at [http://waterlogue.com/tips-001/](http://waterlogue.com/tips-001/) * If you can let me know what CSS I can use to get all the images to the bottom, that would be great. * One other thing — there seems to be 8px of padding throughout the whole table. Is that specified in the custom settings, or is that something I can get rid of in my custom CSS? * Many thanks, Nick * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 3 months ago](https://wordpress.org/support/topic/column-width-vertical-alignment/#post-3500894) * Hi, * thanks for your post! * Please try this CSS: * ``` .tablepress-id-2 .row-1 td, .tablepress-id-2 .row-3 td, .tablepress-id-2 .row-5 td, .tablepress-id-2 .row-7 td { vertical-align: bottom; width: 50%; } ``` * That will move the images to the bottom and will also make both column the same width. * And yes, all table cells have a default padding of 8px (in the TablePress default CSS). You can of course override that, just as you already have with setting the bottom padding of a few rows to 40px. Removing the padding entirely will however move the text in the two columns right next to each other. So I’m not sure that changing the padding here is necessary. * Regards, Tobias * [nycnml](https://wordpress.org/support/users/nycnml/) * (@nycnml) * [13 years, 3 months ago](https://wordpress.org/support/topic/column-width-vertical-alignment/#post-3500895) * Hi Tobias, * Worked perfectly, thanks! I appreciate the tip about the 50% thing. It makes sense. As to the 8px default padding, I suppose if I want to address it I can do so on an individual basis — that is, it’s more of an issue for the rows that have images. I _think_ I have the skills to remove the padding from just those rows, but if you have a quick snippet at the ready, I wouldn’t be unhappy about it 😉 * Thanks again, Nick * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 3 months ago](https://wordpress.org/support/topic/column-width-vertical-alignment/#post-3500896) * Hi Nick, * sure, no problem! You are very welcome! * So, you want to remove the padding in the cells that have images (so that the images will be slightly bigger)? Then just add a * ``` padding: 0; ``` * to the CSS declaration from my previous post. That should do it. * Regards, Tobias * [nycnml](https://wordpress.org/support/users/nycnml/) * (@nycnml) * [13 years, 3 months ago](https://wordpress.org/support/topic/column-width-vertical-alignment/#post-3500897) * Hi Tobias, * Thanks — confession: I am a bit confused. I’m not sure where to add that “padding: 0;” line. Right now, my custom CSS looks like what’s pasted below. * .tablepress-id-2 tbody td { font-family: Verdana; font-size: 11px; line-height: 1.6em; color: #585660; background-color: #fff; } * .tablepress-id-2, .tablepress-id-2 tr, .tablepress-id-2 tbody td, .tablepress- id-2 thead th, .tablepress-id-2 tfoot th { border-top: #fff; border-left: #fff; border-right: #fff; border-bottom: #fff; background-color: #fff; } * .tablepress-id-2 .row-2 td { padding-bottom: 40px; } * .tablepress-id-2 .row-1 td { background-color: #fff; } * .tablepress-id-2 .row-3 td { background-color: #fff; } * .tablepress-id-2 .row-5 td { background-color: #fff; } * .tablepress-id-2 .row-7 td { background-color: #fff; } * .tablepress-id-2 .row-4 td { padding-bottom: 40px; } * .tablepress-id-2 .row-6 td { padding-bottom: 40px; } * .tablepress-id-2 .row-8 td { padding-bottom: 40px; } * .tablepress-id-2 .row-1 td, .tablepress-id-2 .row-3 td, .tablepress-id-2 .row- 5 td, .tablepress-id-2 .row-7 td { vertical-align: bottom; width: 50%; } * /* THIS IS THE SURF SCHOOL TABLE */ .tablepress-id-4 tbody td { font-family: Verdana; font-size: 11px; line-height: 1.6em; color: #585660; background-color:# fff; } * .tablepress-id-4, .tablepress-id-4 tr, .tablepress-id-4 tbody td, .tablepress- id-4 thead th, .tablepress-id-4 tfoot th { border-top: #fff; border-left: #fff; border-right: #fff; border-bottom: #fff; background-color: #fff; } * .tablepress-id-4 .row-2 td { padding-bottom: 30px; } * .tablepress-id-4 .row-1 td { background-color: #fff; } * .tablepress-id-4 .row-3 td { background-color: #fff; } * .tablepress-id-4 .row-5 td { background-color: #fff; } * .tablepress-id-4 .row-7 td { background-color: #fff; } * .tablepress-id-4 .row-4 td { padding-bottom: 30px; } * .tablepress-id-4 .row-6 td { padding-bottom: 30px; } * .tablepress-id-4 .row-8 td { padding-bottom: 30px; } * .tablepress-id-4 .row-1 td, .tablepress-id-4 .row-3 td, .tablepress-id-4 .row- 5 td, .tablepress-id-4 .row-7 td { vertical-align: bottom; width: 33%; } * Can you tell me where, specifically, I should put the “padding 0” bit? Thanks so much, I appreciate the assist. * Regards, Nick Viewing 15 replies - 1 through 15 (of 20 total) 1 [2](https://wordpress.org/support/topic/column-width-vertical-alignment/page/2/?output_format=md) [→](https://wordpress.org/support/topic/column-width-vertical-alignment/page/2/?output_format=md) The topic ‘Column Width & Vertical Alignment’ 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/) * 20 replies * 4 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [12 years, 10 months ago](https://wordpress.org/support/topic/column-width-vertical-alignment/page/2/#post-3500982) * Status: resolved