eak500

That works flawlessly. Thanks a lot Tobias.

I have another 2 issues. Can you help?

1. On the mobile page, I use flip mode. I have a problem aligning 1st row (which is picture) and 4th row( which is model description and it is usually quite long). The long model description make the column wide, then the 1st row for the photo is not properly align and somehow there is no line between the row at bottom of 1st row.

2. On the normal computer page, How can I align the whole data in 4th column (which is model) to the “left”, but column header to the center.

Thanks in advance.

This is the custom CSS that i’m using.

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

.tablepress .column-1 {
height: 160px !important;
}

.tablepress img.aligncenter {
margin: 0 auto;
}

}

.tablepress .column-1 {
width: 160px;
}

.tablepress .column-2,
.tablepress .column-4 {
white-space: nowrap;
}

.tablepress thead th,
.tablepress tfoot th {
background-color: #f0f0f0;
color: #797979;
font-style: normal;
}

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

.tablepress thead th,
.tablepress tbody td {
text-align: center;
}

td.column-1,
td.column-2,
td.column-3,
td.column-4,
td.column-5,
td.column-6,
td.column-7,
td.column-8,
td.column-9,
td.column-10,
td.column-11 {
vertical-align: middle !important;
}