Problems with alignment

Tricky tricky tricky.
Each row IS aligned.

“Panda” is not in the first cell of a row. “Overall Ranking” is.

CSS is being used to flip the table on its side. (You can see it clear as day if you use something like the Web Developer Chrome extension to turn off the CSS.)

Each cell in the first “column” is 56 px tall because of its contents. Your solution is probably to make each cell 56 px tall.

https://www.w3schools.com/tags/att_td_height.asp

It is tricky – I know that the table is being flipped and that the first column is actually the th, however when I increase the size of the columns with the data to 56px, then the th increase to 72px, even though I specifically set it to a height. Originally, it was 40px, but when I increased the columns to that, it became 56px – see the problem? I’m setting it manually using the cusotm css. Maybe I’m doing something wrong there?? does it have something to do with the .sorting class? Here’s what I have:

@media (max-width: 900px) {

.tablepress-id-5 {
clear: both;
}

.tablepress-id-5 thead th,
.tablepress-id-5 tbody td {
height: 40px;
line-height: normal;
}/*not doing anything for the layout
.tablepress-id-5 .column-1,
.tablepress-id-5 .column-2,
.tablepress-id-5 .column-3,
.tablepress-id-5 .column-4,
.tablepress-id-5 .column-5,
.tablepress-id-5 .column-6,
.tablepress-id-5 .column-7,
.tablepress-id-5 .column-8,
.tablepress-id-5 .column-9,
.tablepress-id-5 .column-10,
.tablepress-id-5 .column-11,
.tablepress-id-5 .column-12 {
height: 56px;
text-align: center;
}
*/

}

.tablepress-id-5 .img_scale {
max-width: 18px;
height: 18px;
display: block;
margin: 0 auto;
}

.tablepress-id-5 .column-1 {
font-weight: bolder;
text-align: center;
}

/*.tablepress-id-5 .column-2 {
height: 40px;
}
*/
.tablepress-id-5 .column-1,
.tablepress-id-5 .column-2,
.tablepress-id-5 .column-3,
.tablepress-id-5 .column-4,
.tablepress-id-5 .column-5,
.tablepress-id-5 .column-6,
.tablepress-id-5 .column-7,
.tablepress-id-5 .column-8,
.tablepress-id-5 .column-9,
.tablepress-id-5 .column-10,
.tablepress-id-5 .column-11,
.tablepress-id-5 .column-12 {
height: 56px;
text-align: center;
}

Sorry about that. I wasn’t trying to talk down to you. You never know what the other person knows.

A couple thoughts:

Have you tried throwing in a couple “!important” to override some strange CSS you might not be seeing?

Is “table-layout: fixed;” declared anywhere?

Can you do it without making the first row header cells?

I hope you figure this one out and share the results. This one is odd.

Josh

I’ll try some of these suggestions and see if any of those help. For a while I thought I was going crazy trying to figure it out lol. If any work I will definitely share!

Well, I did find that turning off the “Table Head Row” fixed it, but unfortunately the client wants all the features only available if that’s turned on. At least I know it’s something there….I’ve tried the !important and making the table fixed – nada. Guess I’ll keep at it….

Now works like a charm, ripped everything out and started over, ended up with this:

.tablepress-id-5 .img_scale {
max-width: 18px;
height: 18px;
display: block;
margin: 0 auto;
}

.tablepress-id-5 .logos {
max-width: 75px;
height: 20px;
display: block;
margin: 0 auto;
}

.tablepress-id-5 .column-1 {
font-weight: bolder;
text-align: center;
}

.tablepress-id-5 .row-2 {
font-weight: bolder;
text-align: center;
}

.tablepress-id-5 .column-1,
.tablepress-id-5 .column-2,
.tablepress-id-5 .column-3,
.tablepress-id-5 .column-4,
.tablepress-id-5 .column-5,
.tablepress-id-5 .column-6,
.tablepress-id-5 .column-7,
.tablepress-id-5 .column-8,
.tablepress-id-5 .column-9,
.tablepress-id-5 .column-10,
.tablepress-id-5 .column-11,
.tablepress-id-5 .column-12 {
height: 40px !important;
text-align: center;
}

.tablepress-id-5 th.column-1.sorting,
.tablepress-id-5 th.column-2.sorting,
.tablepress-id-5 th.column-3.sorting,
.tablepress-id-5 th.column-4.sorting,
.tablepress-id-5 th.column-5.sorting,
.tablepress-id-5 th.column-6.sorting,
.tablepress-id-5 th.column-7.sorting,
.tablepress-id-5 th.column-8.sorting,
.tablepress-id-5 th.column-9.sorting,
.tablepress-id-5 th.column-10.sorting,
.tablepress-id-5 th.column-11.sorting,
.tablepress-id-5 th.column-12.sorting {
height: 44px !important;
text-align: center;
padding: 2px;
background-color: white;
}

Hope it helps someone else!

Hi,

thanks for your post, and sorry for the trouble.

Very nice, great to hear that you were already able to fix this! Josh Robbs, thanks for helping out here!

Regards,
Tobias