Title: Vertical Table Head Last modified: February 5, 2019 --- # Vertical Table Head * Resolved [awbwerbung](https://wordpress.org/support/users/awbwerbung/) * (@awbwerbung) * [7 years, 4 months ago](https://wordpress.org/support/topic/vertical-table-head/) * Hi everybody, * i’m not sure how to achieve one thing: * I have a table with 17 colums. the title of each column is a bit longer while the contetnt of each cell is very small. * Like this: * Head: Widht of Element Content: 29-31 * so i want the head to turn 90° and make the cells fit the small content. * I dont know how to explain it propperly… but is there a simple sollution? * CSS and “rotate (270deg)” rotates the titles, but the cell-size is not shrinking… Viewing 5 replies - 1 through 5 (of 5 total) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [7 years, 4 months ago](https://wordpress.org/support/topic/vertical-table-head/#post-11169951) * Hi, * thanks for your post, and sorry for the trouble. * Rotating the headers is not directly possible – but you can add a HTML element( a ``) inside it and rotate that. For some information on that, please see these links: [https://wordpress.org/support/topic/rotating-header-text/](https://wordpress.org/support/topic/rotating-header-text/) [https://wordpress.org/support/topic/rotating-and-vertically-align-text-from-bottom-to-top/](https://wordpress.org/support/topic/rotating-and-vertically-align-text-from-bottom-to-top/) [https://wordpress.org/support/topic/table-too-large-2/](https://wordpress.org/support/topic/table-too-large-2/) * Regards, Tobias * Thread Starter [awbwerbung](https://wordpress.org/support/users/awbwerbung/) * (@awbwerbung) * [7 years, 4 months ago](https://wordpress.org/support/topic/vertical-table-head/#post-11170099) * Hey thanks 🙂 * i NEARLY got it working. For now it looks like this… some cells in the first row are somehow wrong… but i can’t find out why… * Maybe you can take a quick look… * This is how it looks now: * [http://neu.druckereiservice.de/waschmittel/](http://neu.druckereiservice.de/waschmittel/) - This reply was modified 7 years, 4 months ago by [awbwerbung](https://wordpress.org/support/users/awbwerbung/). * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [7 years, 4 months ago](https://wordpress.org/support/topic/vertical-table-head/#post-11170182) * Hi, * you could maybe try this modified version: * ``` .tablepress-id-11 thead tr { height: 150px; } .tablepress-id-11 thead th { vertical-align: middle; } .tablepress-id-11 thead th 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; width: 60px !important; transform-origin: center center; } ``` * Other than that, I don’t really know what to do here – except maybe turning off the “Use DataTables” checkbox and instead using the `scroll` mode of the TablePress Extension from [https://tablepress.org/extensions/responsive-tables/](https://tablepress.org/extensions/responsive-tables/) * Regards, Tobias * Thread Starter [awbwerbung](https://wordpress.org/support/users/awbwerbung/) * (@awbwerbung) * [7 years, 4 months ago](https://wordpress.org/support/topic/vertical-table-head/#post-11170589) * Hey thanks again. * I think i made it… at least for my needs. * Steps: Put the title in a div AND a span * like: * `
A very very long title
` * The CSS looks like this now: * ``` .tablepress-id-11 th { /* Something you can count on */ height: 200px; /* make this big enough to fit your titles */ white-space: nowrap; } th > div { transform: /* Magic Numbers */ /* 45 is really 360 - 45 */ translate(25px,51px) rotate(315deg); width: 30px; } th > div > span { border-bottom: 1px solid #ccc; padding: 5px 10px; } .tablepress-id-11 td { text-align: center; } ``` * I found this code on another website, but now it fits my needs. Its not 90° rotated but 45, which is ok for me. * Thanks Tobias for your support. Its really a great plugin, once you know how to handle all the stuff!! thanks! * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [7 years, 4 months ago](https://wordpress.org/support/topic/vertical-table-head/#post-11170624) * Hi, * no problem, you are very welcome! 🙂 Good to hear that this helped, and thanks for sharing your solution! * Best wishes, Tobias * P.S.: In case you haven’t, please [rate TablePress](https://wordpress.org/support/plugin/tablepress/reviews/#new-post) here in the plugin directory. Thanks! Viewing 5 replies - 1 through 5 (of 5 total) The topic ‘Vertical Table Head’ 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 * [head](https://wordpress.org/support/topic-tag/head/) * [table](https://wordpress.org/support/topic-tag/table/) * [vertical](https://wordpress.org/support/topic-tag/vertical/) * 5 replies * 2 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [7 years, 4 months ago](https://wordpress.org/support/topic/vertical-table-head/#post-11170624) * Status: resolved