Table and table content should resize in HTML according to device screen

I am new to HTML and designing a page that picks up files from a directory. Another column contains checkbox for selecting the files. When I open the page from my mobile browser, the table size does not change, hence i need to maximize the table manually. Is there any way in HTML that I can render the table according to the browser sizes? I tried googling for the same but in vain. It will be great if someone just redirects me to the concept.Thanks in advance!

Answers


What you are looking for is called responsive web design.There are few possible ways to do it. You can select according to your need

  1. You can use media queries in which you define different stylesheets for different screens. This is the most used way currently. Sneak Peek: http://css-tricks.com/css-media-queries/ and https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

  2. You can use the viewport meta tag. Sneak Peek:https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

  3. You can design everything in % (fluid responsive) but that part is very tricky. From my experience I can say that designing a full website giving everything in % is very difficult.

I will suggest you to learn media query. Its quite simple and reliable.


Please add the code...there's no definite answer if we can't see what you have right now. You can add

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

to your head tags for starters.

In your CSS file:

/* Retina display */
@media screen and (min-width: 1024px){
    .responsive-table{
        [CSS CODE];
    }
}

/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
    .responsive-table{
        [CSS CODE];
    }
}

/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
    .responsive-table{
        [CSS CODE];
    }
}

/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
    .responsive-table{
        [CSS CODE];
    }
}

/* Mobile LD */
@media screen and (max-width: 350px){
    .responsive-table{
        [CSS CODE];
    }
} 

Need Your Help

Unable to git-push since upgrading to SourceTree 1.6.24.0

git atlassian-sourcetree sourcetree

I keep getting the following error since upgrading to Atlassian SourceTree version 1.6.24.0 on Windows:

How to populate JList with .java and .class files

java swing netbeans filesystems jlist

I'm creating an application that gets a list of .java and .class files from a chosen directory and places them in a JList. I am using Netbeans 7.1.2.