How to make fully responsive table designs ?

orangesweety

New member
Joined
May 25, 2015
Messages
31
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

New member
Joined
Apr 22, 2013
Messages
25
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

New member
Joined
Apr 3, 2015
Messages
770
Points
0
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
Joined
Jun 13, 2015
Messages
6
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
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

Active member
Joined
Oct 15, 2015
Messages
151
Points
28
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

New member
Joined
Nov 19, 2015
Messages
25
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
Recommended threads
Replies
5
Views
2,892
Replies
0
Views
2,815
Replies
14
Views
6,883
Replies
5
Views
3,415

Latest postsNew threads

Referral contests

Referral link for :

Sponsors

Popular tags

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