Docly

Responsive Table For Mobile And Tablet

Estimated reading: 1 minute 209 views

Time needed: 5 minutes.

In this tutorial, I will create a responsive table. In the mobile version, we will display only two columns. But we will display all information as a desktop version! How can we do that? let's see

  1. Add a blank column.

    We will add two blank columns. Those columns are for mobile. First column keyword 'mobile_col_1' and second column keyword 'mobile_col_2'

  2. Active Columns For Mobile

    From the 'DEVICEWISE COLUMN SETTING' section, click on the 'Mobile' tab and select the'mobile_col_1' and 'mobile_col_2' columns.

  3. Set mobile_col_1 column

    Click and expand 'mobile_col_1'. Give the column a name ( I gave it the name "Image"). Select which columns you want to display in this column as inner items from the 'Select multiple inner items' section.

  4. Set mobile_col_2 column

    Do exactly the same as in step 3.

All done. Now hit the Publish/Update table to save those changes. Note that you can follow the same steps for Tablet version.

To see the demo table, click Here. You can export this table to your site as well. Read this Article.

CONTENTS