Posted on

Show column label before inner items

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.

  1. Add a new blank column

    If you need help on How to add a new blank column in Woo Product Table read this article.

  2. 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.

  3. Now hide the new blank column in desktop view

    If you need help on how to show/hide table's column read this article.

  4. 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.

  5. 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;
}

Still no luck? We can help!

Submit a Request

Contact us and we’ll get back to you as soon as possible.