Alignment problem with rotated headers

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 <span> 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

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

Hi,

ah, ok. Instead of setting the height of the <span>s, try setting it on the actual cells:

.tablepress-id-16 thead th {
  height: 100px;
}

Regards,
Tobias

Magic, thanks!

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 here in the plugin directory. Thanks!

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;
}

Hi,

just remove

height: 100px;

from the

.tablepress-id-16 thead span {

block.

Regards,
Tobias