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;
Method#1
|
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%;">
...
</table>
Also, avoid using the height property, or at least leave it as “auto”.
<table style="width: 100%; height: auto;">
...
</table>
Method#2
|
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:
<table>
...
</table>
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:
<style>
table{
width: 100%;
}
</style>
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.
0 Comments