Title: Alignment problem with rotated headers Last modified: August 31, 2016 --- # Alignment problem with rotated headers * Resolved [timothybrignall](https://wordpress.org/support/users/timothybrignall/) * (@timothybrignall) * [10 years, 1 month ago](https://wordpress.org/support/topic/alignment-problem-with-rotated-headers/) * Hi, * I’m having trouble with aligning column headers after I’ve rotated the text. The first two column headers aren’t rotated, but the rest are. It looks as though the headers are all shifted one column to the left. * Also, I’ve set column widths in the CSS, but they don’t appear to be applying correctly. * Here’s the page: [](http://s624622749.websitehome.co.uk/racesresults/club-championship/club-championship-2015-16) * And here’s my custom CSS: * .tablepress-id-16 td, .tablepress-id-16 tr, .tablepress-id-16 tbody td, .tablepress- id-16 thead th, .tablepress-id-16 tfoot th { border: 1px solid #DDDDDD; font- size: 10px; } * .tablepress-id-16 .row-1 span { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage( rotation=3); display: block; height: 75px; text-align: center; vertical-align: center; } * .tablepress thead th, .tablepress tbody tb { text-align: center; vertical-align: bottom; border: 1px solid #DDDDDD; } * .tablepress-id-16 { white-space: nowrap; margin: 0 auto 1em; width: 405px !important;} * .tablepress-id-16 .column-2 { width: 75px; } * .tablepress-id-16 .column-1, .tablepress-id-16 .column-3, .tablepress-id-16 . column-4, .tablepress-id-16 .column-5, .tablepress-id-16 .column-6, .tablepress- id-16 .column-7, .tablepress-id-16 .column-8, .tablepress-id-16 .column-9, .tablepress- id-16 .column-10, .tablepress-id-16 .column-11, .tablepress-id-16 .column-12,. tablepress-id-16 .column-13, .tablepress-id-16 .column-14, .tablepress-id-16 . column-15, .tablepress-id-16 .column-16, .tablepress-id-16 .column-17, .tablepress- id-16 .column-18, .tablepress-id-16 .column-19, .tablepress-id-16 .column-20,. tablepress-id-16 .column-21, .tablepress-id-16 .column-22, .tablepress-id-16 . column-23 { width: 15px; } * Thanks, Tim * [https://wordpress.org/plugins/tablepress/](https://wordpress.org/plugins/tablepress/) Viewing 7 replies - 1 through 7 (of 7 total) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [10 years, 1 month ago](https://wordpress.org/support/topic/alignment-problem-with-rotated-headers/#post-7361842) * Hi, * thanks for your post, and sorry for the trouble. * The reason why the first two are not rotated simply is that you have not placed the text in a `` element, like the other ones. * To force the widths, please try changing * ``` width: 15px; ``` * to * ``` width: 15px !important; ``` * and extend * ``` .tablepress-id-16 { white-space: nowrap; margin: 0 auto 1em; width: 405px !important; } ``` * to * ``` .tablepress-id-16 { table-layout: fixed; white-space: nowrap; margin: 0 auto 1em; width: 405px !important; } ``` * Regards, Tobias * Thread Starter [timothybrignall](https://wordpress.org/support/users/timothybrignall/) * (@timothybrignall) * [10 years, 1 month ago](https://wordpress.org/support/topic/alignment-problem-with-rotated-headers/#post-7361872) * OK thanks. Looking better for column width, but the headers are still floating way out of place. The first two column headers are meant to be the other way – that was deliberate! * Thanks, Tim * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [10 years, 1 month ago](https://wordpress.org/support/topic/alignment-problem-with-rotated-headers/#post-7361876) * Hi, * ah, ok. Instead of setting the height of the ``s, try setting it on the actual cells: * ``` .tablepress-id-16 thead th { height: 100px; } ``` * Regards, Tobias * Thread Starter [timothybrignall](https://wordpress.org/support/users/timothybrignall/) * (@timothybrignall) * [10 years, 1 month ago](https://wordpress.org/support/topic/alignment-problem-with-rotated-headers/#post-7361877) * Magic, thanks! * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [10 years, 1 month ago](https://wordpress.org/support/topic/alignment-problem-with-rotated-headers/#post-7361884) * Hi, * no problem, you are very welcome! 🙂 Good to hear that this helped! * Best wishes, Tobias * P.S.: In case you haven’t, please [rate TablePress](https://wordpress.org/support/view/plugin-reviews/tablepress) here in the plugin directory. Thanks! * Thread Starter [timothybrignall](https://wordpress.org/support/users/timothybrignall/) * (@timothybrignall) * [10 years, 1 month ago](https://wordpress.org/support/topic/alignment-problem-with-rotated-headers/#post-7361890) * Sorry, I have managed to delete the CSS I had by trying to do some clever that I shouldn’t have done… * Here’s the code as I’ve recovered it, but something must be missing: * ``` .tablepress-id-16 td, .tablepress-id-16 tr, .tablepress-id-16 tbody td, .tablepress-id-16 thead th, .tablepress-id-16 tfoot th { border: 1px solid #DDDDDD; font-size: 10px; } .tablepress thead th, .tablepress tbody tb { text-align: center; vertical-align: bottom; border: 1px solid #DDDDDD; } .tablepress-id-16 thead span { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); display: block; height: 100px; text-align: left; } .tablepress-id-16 { table-layout: fixed; white-space: nowrap; margin: 0 auto 1em; width: 405px !important; } .tablepress-id-16 thead th { height: 100px; } .tablepress-id-16 .column-2 { width: 75px !important; } .tablepress-id-16 .column-1, .tablepress-id-16 .column-3, .tablepress-id-16 .column-4, .tablepress-id-16 .column-5, .tablepress-id-16 .column-6, .tablepress-id-16 .column-7, .tablepress-id-16 .column-8, .tablepress-id-16 .column-9, .tablepress-id-16 .column-10, .tablepress-id-16 .column-11, .tablepress-id-16 .column-12, .tablepress-id-16 .column-13, .tablepress-id-16 .column-14, .tablepress-id-16 .column-15, .tablepress-id-16 .column-16, .tablepress-id-16 .column-17, .tablepress-id-16 .column-18, .tablepress-id-16 .column-19, .tablepress-id-16 .column-20, .tablepress-id-16 .column-21, .tablepress-id-16 .column-22, .tablepress-id-16 .column-23 { width: 15px !important; } ``` * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [10 years, 1 month ago](https://wordpress.org/support/topic/alignment-problem-with-rotated-headers/#post-7361920) * Hi, * just remove * ``` height: 100px; ``` * from the * ``` .tablepress-id-16 thead span { ``` * block. * Regards, Tobias Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘Alignment problem with rotated headers’ 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 * [alignment](https://wordpress.org/support/topic-tag/alignment/) * [header](https://wordpress.org/support/topic-tag/header/) * [rotate](https://wordpress.org/support/topic-tag/rotate/) * [width](https://wordpress.org/support/topic-tag/width/) * 7 replies * 2 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [10 years, 1 month ago](https://wordpress.org/support/topic/alignment-problem-with-rotated-headers/#post-7361920) * Status: resolved