Header and body columns not aligning until clicking header column

Hello,

I’m having the following problem. I have a table made in TablePress, which behaves just fine in normal conditions.

I’m now trying to have it in accordion mode inside my shop page, and there’s something “funny”. First it aligns the header and body columns differently. Then, when I click on the header column, it aligns itself perfectly.

I have made some CSS changes to the table, as follows:

.tablepress-id-1,
.tablepress-id-1 tr,
.tablepress-id-1 tbody td,
.tablepress-id-1 thead th,
.tablepress-id-1 tfoot th {
border: solid;
border-width: 1px;
font-size: 92%;
}

.tablepress-id-1 thead th {
border-color: #0f1626;
}

.tablepress-id-1 tbody td {
color: #474747;
}
.tablepress-id-1 .column-7 {
width: 9em;
}

.tablepress-id-1 .column-4 {
width: 6em;
}

.tablepress-id-1 .column-5 {
width: 6em;
}

.tablepress-id-1 .column-3 {
width: 11em;
}

.tablepress-id-1 .column-1 {
padding-left: 10px;
}

A video-link to the problem: https://www.dropbox.com/s/g1dg5hjevbcfhvl/TablePressProblem.mov?dl=0

I use Flatsome (v3) -theme.

Thank you in advance.