How to make fully responsive table designs ?

orangesweety · Jun 10, 2015

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 · Jun 10, 2015

orangesweety said:
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 · Jun 11, 2015

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.

arronmattwills · Jun 12, 2015

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 · Jun 13, 2015

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 · Oct 16, 2015

Psd to html responsive

Hi,

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

RenderedElite · Oct 17, 2015

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 · Nov 25, 2015

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 · Jan 19, 2016

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

Thanks.

How to make fully responsive table designs ?

orangesweety

Member

melviin

Member

RDO Servers

Well-known member

orangesweety

Member

arronmattwills

Well-known member

Kyrie

New member

Baljit singh

New member

RenderedElite

New member

rmmfree

Member

Wiliam

New member

Emilio

Active member

Latest posts New threads

Latest posts

New threads

Latest Hosting Offers New Reviews

Latest hosting offers

Popular Contributors - Past 30 Days

Sponsors

Tag Cloud