Please help me to get the best UI layout as I don't want to use the table in my page due to less number of the column.


If you have a 2 column list with key-value pairs then you could use a ‘description list’ (<dl>).

Something like this: enter image description here

It gives you the layout you're after while also being able to adapt nicely on small screens where needed like this: enter image description here

Tables are not very malleable in this regard — nor should they be really because tables should be used when comparison is the main user need.

Changing the layout on mobile (regardless of how we like to avoid horizontal scrolling) is probably still the right interaction.

In other words, if you need a table, you need a table regardless of screen size.

In your case though, by the sounds of it you don't.


Inline chips blocks UI to avoid table

I used the inline chips block to display my content. With that kind of UX, the user can review more data in his first view.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.