matlas44

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.

Alternatively, can I shade just a group of cells? If so, how?

Thanks – it worked – mostly.

I also applied it on the last column on the right, but as you can see, in the second row at the end, where it says “Thursday,” there is no border.

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

I also applied it to the bottom of some of the rows – but something similar happened. I applied it to the bottom of the 6th row, and you can see that in the first two columns of the 6th row, it was not applied. Same as in row 11; and then the same thing in row 12 at the last column, and same with row 15, at the in the first two columns and the next to last column.

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

How can I fix this?

Thanks!

Awesome – fixed the problem! Thanks!

Hey Tobias,

I got the columns in the table on the bottom of this page to work (like you helped me earlier today). But I need to make a darker border between each day of the week – but as you can see, I have a lot of merging going on. I have looked through various threads and have not found a solution to this specific problem, as I do not need the header included. I have tried some of the codes in the various threads, but nothing is working ??

Thanks!

Hi Tobias,

I have been scouring through this thread and some others – I am having trouble changing the width of the columns in the table of the bottom of this page.

I want the columns that have vertical text to be much narrower (and I cannot believe I figured out how to make that text vertical!), while I want to be able to make other columns wider. I have tried various options in the plugin options CSS:

Option 1:

.tablepress-id-175 .column-1 td {
	width: 50px !important;
}

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

.tablepress-id-175 .column-3 td {
	width: 50px !important;
}

.tablepress-id-175 .column-4 td {
	width: 50px !important;
}

.tablepress-id-175 .column-5 td {
	width: 50px !important;
}

.tablepress-id-175 .column-6 td {
	width: 50px !important;
}

.tablepress-id-175 .column-7 td {
	width: 50px !important;
}

.tablepress-id-175 .column-8 td {
	width: 50px !important;
}

.tablepress-id-175 .column-9 td {
	width: 50px !important;
}

.tablepress-id-175 .column-10 td {
	width: 50px !important;
}

.tablepress-id-175 .column-11 td {
	width: 50px !important;
}

.tablepress-id-175 .column-12 td {
	width: 50px !important;
}

.tablepress-id-175 .column-13 td {
	width: 50px !important;
}

.tablepress-id-175 .column-14 td {
	width: 50px !important;
}

.tablepress-id-175 .column-15 td {
	width: 50px !important;
}

Option 2:

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

.tablepress-id-175 .column-2 td {
	width: 10% !important;
}

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

.tablepress-id-175 .column-4 td {
	width: 10% !important;
}

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

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

.tablepress-id-175 .column-7 td {
	width: 10% !important;
}

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

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

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

.tablepress-id-175 .column-11 td {
	width: 10% !important;
}

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

.tablepress-id-175 .column-13 td {
	width: 4% !important;
}

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

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

I have tried without td and without !important– nothing seems to be working. I have also tried:

#tablepress-175_wrapper {
  width: 400px;
}

I have tried various other things – nothing seems to be working! How can I fix this please?

Thanks!

Ok I just submitted it but you guys are kind of slow to answer… I have a rather urgent matter that I already sent and it has yet to be resolved.

Thank you!!! Much better!

I don’t remember changing anything really in the settings (maybe the default calendar or something). I cannot figure out how to change the time zone to automatically be the one I need it to be…

Ah ok I fixed it but the problem is still happening!
https://overseas.huji.ac.il/academics/undergraduate-programs/ugrad-usap/

I am sorry I don’t know what you mean…. this is the code I have:

.accordion-content {
/*margin-right: 324px;*/
}

#tablepress-77-scroll-wrapper {
	float: left;
	width: 49%;
}

#tablepress-78-scroll-wrapper {
	float: right;
	width: 49%;
}

#tablepress-78-scroll-wrapper + h2 {
	clear: both;
}

@media screen and (max-width: 800px) {

	#tablepress-77-scroll-wrapper,
	#tablepress-78-scroll-wrapper {
		float: none;
		width: 100%;
	}

}

What do you mean “comment out”? Please help!

Hi Tobias

I am having problems again! Please have a look at this page.

This is the CSS code I have: .accordion-content {
/*margin-right: 324px;*/
}

#tablepress-77-scroll-wrapper {
float: left;
width: 49%;
}

#tablepress-78-scroll-wrapper {
float: right;
width: 49%;
}

#tablepress-78-scroll-wrapper + h2 {
clear: both;
}

@media screen and (max-width: 800px) {

#tablepress-77-scroll-wrapper,
#tablepress-78-scroll-wrapper {
float: none;
width: 100%;
}

It’s also happening on my Arabic Immersion page.

And on my other pages, like the music one, the space is too wide between the tables! Please help! (The tables are under the accordion “Costs & Scholarships”)

Thanks!

Thank you for your response. It says in your instructions on this page:

“Please make sure that Permalink link should not be “/news” Otherwise all your news will go to archive page. You can give it other name like “/ournews, /latestnews etc”**

And right now, if you go to overseas.huji.ac.il/news, it doesn’t work! How can I make it work? I want to have a news page where you can see a grid of news items and click on the one you want.

Thanks!

Thanks they look much better.

But now, I no longer need to open the costs and scholarship sections in mobile mode to see those tables – they automatically appear – how can I fix it so that you have to open the accordion to see it?

Thanks!

Thanks! That worked… Except now in mobile the tables are realllllly narrow…

https://overseas.huji.ac.il/academics/undergraduate-programs/ugrad-usap/special-interest-programs/arabic-immersion-program/

https://overseas.huji.ac.il/academics/undergraduate-programs/ugrad-usap/

How can I fix that?

Thanks!