Responsive table head row out of alignment

Hi Jodi,

thanks for your post, and sorry for the trouble.
Good to hear that you already made the switch from WP-Table Reloaded to TablePress!

About your issue:
The reason for this is the “Size” column, which has text in two lines of text. Due to that, the height of the rows (in responsive mode) can not be determined correctly and has to be set with CSS.
Please try adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-1 td,
.tablepress-id-1 th {
  height: 59px;
}

Regards,
Tobias

Thank you, Tobias! Worked perfectly. I have another question but am going to search the forum before I bother you again ??

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

And don’t hesitate to open a new thread if you can’t find a solution for the other question!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Hi Tobias

I’m not sure what happened but for some reason my responsive tables are not lining up again.

https://v2.equitablerealestate.ca/office-building-vacancies/

It looks fine on a desktop but not on a tablet or phone – I see a bit of grey top and bottom that seems to be throwing it all off. Please advise and thank you, again. Jodi

I have added this into the plugin options CSS area:

.tablepress-id-1 td,
.tablepress-id-1 th {
	height: 59px;
}

.tablepress thead th,
.tablepress tfoot th {
	color: #fff;
	background-color: #014918;
}

.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
	background-color: #6b6b6b;
}

.tablepress .row-hover tr:hover td {
	background-color: #e8e8e8;
}

.tablepress {
	width: auto;
	margin: 0 auto 1em;
}

.tablepress {
	border: none;
}

Hi Jodi,

as this is now table 2, the CSS from above does not apply, as that was for table 1 only.
To now also change table 2, please add this to the “Custom CSS”:

.tablepress tr {
  vertical-align: top;
}
.tablepress-id-2 .column-8 {
  height:59px;
}

Regards,
Tobias

Ah! Of course, so if I remove the table id then it will work for all tables, correct? I’m curious, what does the .column-8 specify? ??

Hi,

yes, you could remove the “-id-2” part here, and make that piece of code apply to all tables. In this example, you don’t want to do this though, as it would change the height of all cells in all tables then.

The .column-8 specifies that the code shall only apply to column 8 of the table. However, as in the responsive mode the table is flipped, this basically targets row 8 of the table when in responsive mode.

Regards,
Tobias

Ah, thank you for the explanation ??

Hi,

sure, no problem! ??
If this problem happens again, feel free to post here again!

Best wishes,
Tobias