Vertical Table Head

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://www.ads-software.com/support/topic/rotating-header-text/
https://www.ads-software.com/support/topic/rotating-and-vertically-align-text-from-bottom-to-top/
https://www.ads-software.com/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:

https://neu.druckereiservice.de/waschmittel/

• This reply was modified 5 years, 9 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!