Rotated columns

Hi Tobias,

I seemed to have figured out how to make the content not overlap each other, but I am having other issues. First of all, I can’t make column H more narrow, or any of the columns for that matter. Also, everything to the right of “Monday” is all messed up. How can I fix it?

Here is my current CSS code:

.tablepress-id-175 .rotate {
	display: inline-block;
	white-space: nowrap;
	transform: translate(0,100%) rotate(-90deg);
	transform-origin: 0 0;
	vertical-align: bottom;
}

.tablepress-id-175 .rotate:before {
	content: "";
	float: right;
	margin-top: 100%;
}

.tablepress-id-175 .rotate:after {
	content: "";
	display: inline-block;
}

.tablepress-id-175 .column-1 {
	width: 20% !important;
}

.tablepress-id-175 .column-2 {
	width: 20px !important;
}

.tablepress-id-175 .column-3 .rotate {
	width: 20px;
	top: 300px;
	position: relative;
}

.tablepress-id-175 .column-4 .rotate {
	width: 20px;
	top: 300px;
	position: relative;
}

.tablepress-id-175 .column-5 {
	width: 15% !important;
}

.tablepress-id-175 .column-6 .rotate {
	width: 20px;
	top: 300px;
	position: relative;
}

.tablepress-id-175 .column-7 .rotate {
	width: 20px;
	top: 300px;
	position: relative;
}

.tablepress-id-175 .column-8 {
	width: 20px;
	top: 300px;
	position: relative;
}

.tablepress-id-175 .column-9 .rotate {
	width: 20px;
	top: 300px;
	position: relative;
}

.tablepress-id-175 .column-10 .rotate {
	width: 20px;
	top: 300px;
	position: relative;
}

.tablepress-id-175 .column-11 .rotate {
	width: 20px;
	top: 300px;
	position: relative;
}

.tablepress-id-175 .column-12 {
	width: 15% !important;
}

.tablepress-id-175 .column-13 .rotate {
	width: 20px;
	top: 300px;
	position: relative;
}

.tablepress-id-175 .column-14 .rotate {
	width: 20px;
	top: 300px;
	position: relative;
}

.tablepress-id-175 .column-15 .rotate {
	width: 20px;
	top: 300px;
	position: relative;
}

.tablepress-id-175 .column-16 .rotate {
	width: 20px;
	top: 300px;
	position: relative;
}

.tablepress-id-175 tbody .column-1,
.tablepress-id-175 tbody .column-2,
.tablepress-id-175 tbody .column-5,
.tablepress-id-175 tbody .column-8,
.tablepress-id-175 tbody .column-12,
.tablepress-id-175 tbody .column-15 {
	border-left: 1px solid #000000 !important;
}

.tablepress-id-175 tbody .column-16 {
	border-right: 1px solid #000000 !important;
}

.tablepress-id-175 tbody .row-2,
.tablepress-id-175 tbody .row-6,
.tablepress-id-175 tbody .row-7,
.tablepress-id-175 tbody .row-11,
.tablepress-id-175 tbody .row-12,
.tablepress-id-175 tbody .row-15 {
	border-bottom: 1px solid #000000 !important;
}

There is also an extra row at the bottom.

Is there a way to restore a table in tablepress without restoring the entire website or other tables?

Thanks!

• This reply was modified 5 years, 11 months ago by matlas44.

Hi,

thanks for your post, and sorry for the trouble.

Unfortunately, this is a bit too complex for me to spot an immediate mistake in the code.
I can therefore only recommend that you go CSS command by CSS command, i.e. removing everything and then re-adding it one by one, each time checking if the corrected and expected behavior happened.

Regards,
Tobias