How to make fully responsive table designs ?

orangesweety

Member
Registered
Joined
May 25, 2015
Messages
30
Points
0
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?
 
Last edited:

melviin

Member
Registered
Joined
Apr 22, 2013
Messages
21
Points
0
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

Well-known member
Registered
Joined
Apr 3, 2015
Messages
1,027
Points
83
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.
 

Kyrie

New member
Registered
Joined
Jun 13, 2015
Messages
5
Points
0
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

New member
Registered
Joined
Oct 16, 2015
Messages
1
Points
0
Psd to html responsive

Hi,

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

RenderedElite

New member
Registered
Joined
Oct 15, 2015
Messages
11
Points
0
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

Member
Registered
Joined
Nov 19, 2015
Messages
23
Points
0
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.
 
Latest Threads
Replies
0
Views
46
Replies
1
Views
40
Replies
0
Views
33
Replies
2
Views
99
Replies
0
Views
78
Recommended Threads
Replies
3
Views
2,690
Replies
3
Views
2,847
Replies
31
Views
7,707

Latest postsNew threads

Latest Hosting OffersNew Reviews

Sponsors

Tag Cloud

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top