Blogger Text

My Aim to Provide you quality contents, Tips & Tricks, Software, Microsoft Office, Graphic Editing (Adobe PhotoShop, After Affects, Illustrator, inDesign) Corel Draw, Corel Video Studio, Cyberlink PowerDirector, Power ActionCinema, Tutorials about Blogging and VU Assignments, Quizes & GDB Solutions and Much More... at regular Basis
                                     ***    Kindly Subscribe our Official YouTube Channel "INFOPALACESS OFFICIAL-Tuts: in this channel we upload Programming (C,C++,C# JAVA, PHP), Web Development, Graphics Editing and Microsoft Office Step by Step Tutorials from bigginer to Advance Level. We also provide free online courses at our YouTube Channel. ***   Graded Assignments/Quizes and GDB will start in Next Week. Solution ideas of All assignments, Quizes and GDB will be available here. If you have any problem regarding this then you can contact us.

Table Cut Off by Width on Mobile Devices How to Fix this issue.

Comparison Between usage of Pixel Value and Percentage Value While Creating Tables in HTML

Usage of Pixel value attribute is very good to represent things but sometime it creates very ugly results which make us and our users disappointed. For Example, we create Tables for our website [Tables are very useful to present our Data in rows and columns instead of using layouts]. While designing tables be have to be careful especially at width property, here we have to use “percentage” value instead of ”pixel”. Because usage of pixel value at table width property can break the responsive design of our website, especially on mobile devices.
Comparing Tables Using Px To Tables Using %
Here's an example of a table with a static width [pixel value] on mobile. You can see that the table doesn't adapt to the screen size because its width is bigger than the screen-width. The table is cut off.

Here's an example of a table using a percentage width value on mobile. It adapts to the screen-width.

Table is Cut Off on Mobile Devices: How to Fix it?
If your HTML table is cut off on mobile devices, You can fix this issue by using “Percentage” value by adopting any one of following methods below;
Inline CSS Style
No matter if your site uses WordPress, Drupal, Joomla or any other CMS. If you have a table with a pixel value for the width, use a percentage instead.
Example of a correct width value:
<table style="width: 100%;">
Also, avoid using the height property, or at least leave it as “auto”.
<table style="width: 100%; height: auto;">

Theme’ CSS Style
Another alternative is to leave your theme’s CSS to take care of these aspects and remove the inline CSS from your HTML to have a cleaner markup:
If your theme doesn’t have CSS to define the width for tables, To define theme just write following code between the <head> </head>use the example below:
    width: 100%;

That’s it. We have done to make our html table responsive with any mobile devices. Because by using Percentage value table won’t cut off it will automatically adjust the table width according to the mobile screen size.

Post a Comment