Responsive Table on mobile

Hi,

thanks for your post, and sorry for the trouble.

Unfortunately, TablePress does not offer such a “stacking” mode for responsiveness at this time, sorry.
You could maybe try something like

@media screen and (max-width:768px) {
  .tablepress thead {
    display: none;
  }
  .tablepress tbody td {
    display: block;
  }
}

Regards,
Tobias

Not looking good: https://prnt.sc/pwaljt but https://prnt.sc/pw8wig this site make it using tablepress plugin.

Hi,

as I said, I don’t have a solution to create exactly that layout. You’d probably have to use other HTML code instead of a table for that, for free positioning.

You could maybe extend

.tablepress tbody td {
  display: block;
}

to

.tablepress tbody td {
  display: block;
  text-align: center;
  border: none !important;
}

to make it a bit better.

Unfortunately, I don’t know another solution here, sorry.

Regards,
Tobias

Hi,

10beasts.com/best-wireless-routers used this code but when I add this code on my site it’s not working.

@media screen and (max-width: 860px)
.tenb-table__tbody-row {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #E6E6E6;
    border-top: none;
}

Any solution. It’s very importent for my site.

Hi,

their site doesn’t use TablePress, which is why this code doesn’t apply on your site.
I’m afraid that you can’t easily achieve the same responsive layout that easily with TablePress, sorry.

Regards,
Tobias