How to make fully responsive table designs ?

[orangesweety]

Hi friends, we have different popular responsive website design frameworks with unique css coding techniques.

I have recently started a new client project with responsive design, i used different frameworks, but they are making table width to 100% in responsive view but that is not fulfilling the requirement. How to make a fully responsive tables?

 

[melviin]

Hi friends, we have different popular responsive website design frameworks with unique css coding techniques.

I have recently started a new client project with responsive design, i used different frameworks, but they are making table width to 100% in responsive view but that is not fulfilling the requirement. How to make a fully responsive tables?

what are current CSS responsive framework are you using?

Mostly responsive frameworks are supporting responsive tables.

 

[RDO Servers]

Check out Bootstrap. Makes it easy to use a 'table like' design, without actually using tables. When your done, it will be completely responsive also.

 

[orangesweety]

orangesweety

Bootstrap can't serve table's role. Table can have tbody, thead, tr, td. When we need to extract data from a user database, then in table only it will come properly, and tbody section should remain, sometime it will automatically adjust the width as per text length.

 

[arronmattwills]

You can use UL and LI to design a table row and give LI width in percentage in desktop view, make it 100% in mobile view.

This is applicable only when top row doesn't contain titles.

You can overcome this by enabling individual row titles in mobile view.

 

[Kyrie]

Create a div with the size of each column, and the using CSS set responsiveness. You'll have to completely reorganize but I wouldn't make one less than 480 as it is seldom anyone uses a smaller screen.

 

[Baljit singh]

Psd to html responsive

Hi,

Here you can get your responsive designs and concern about responsive sites from psd2html.

 

[RenderedElite]

You must edit the CSS to fix it.. If you know how to code responsive websites then this should be an easy task using a media query to target the resolution and setting the width where you want them. For example if its four columns then make the table 100% and the th, tds 25% .. etc. I am not sure exactly how much data is in these columns so my example may be wrong, but it is an easy task if you resize your browser and use the inspect element tool to play around with the CSS at the targeted resolution.

 

[rmmfree]

You can insert the table into a div with a class for each resolution (mobile, tablet or desktop).
For example, something like:

<div class="col-10-lg col-15-md col-24-sm"><table>....</table></div>

Other way to solve it is to override the table definition in the css file by your own implementation.

 

[Wiliam]

Just go to the Bootstrap.This can be help you.

Thanks.

 

[Emilio]

Emilio

Exactly, If we use Bootstrap responsive css framework, it supported you create a responsive table for seconds.