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 <span>) inside it and rotate that. For some information on that, please see these links:
https://ww.wp.xz.cn/support/topic/rotating-header-text/
https://ww.wp.xz.cn/support/topic/rotating-and-vertically-align-text-from-bottom-to-top/
https://ww.wp.xz.cn/support/topic/table-too-large-2/
Regards,
Tobias
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/
-
This reply was modified 7 years, 4 months ago by
awbwerbung.
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/
Regards,
Tobias
Hey thanks again.
I think i made it… at least for my needs.
Steps:
Put the title in a div AND a span
like:
<div><span>A very very long title</span></div>
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!
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 here in the plugin directory. Thanks!
