This article will guide you to create a responsive table manually beautifully.
Time needed: 5 minutes.
To create a mobile responsive table like above one follow bellow steps.
- Add a new blank column
If you need help on How to add a new blank column in Woo Product Table read this article.
- Now select the columns inside new blank column
If you need help on how to show/hide inner items in a column which you want to show in mobile please read this article.
- Now hide the new blank column in desktop view
If you need help on how to show/hide table's column read this article.
- Now show the new blank column for mobile/tablet device
Now go to responsive table and check the newly added blank column for mobile/tablet device. If you need help on how to create responsive table read this article.
- Hooray! Now mobile/tablet users will see responsive table
If you need same design as shown in image add below CSS to your site's Customize > Additional CSS Block.
.wpt_device_mobile .item_inside_cell {
display: flex;
justify-content: space-between;
align-items: center;
}