Don’t Use Pixel-Width Values in HTML Tables!

Don't Use Tables with Static Pixel-Width!

Yes, it is still acceptable to use tables in your website. Just remember to use tables for their intended purpose (showing data in rows and columns) rather than for layouts.

However, be careful when designing tables, especially when your width property uses px. Why? It can break the responsive design of your site, especially on mobile devices.

In this post, I’ll show you how to fix this issue.

Comparing tables using px to tables using %

Here’s an example of a table with a static width on mobile. The table doesn’t adapt to the screensize because its width is bigger than the screen-width. The table is cut off.

Tables with Static Pixel-Width

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

Tables with Percentage Pixel-Width

If your table is cut off on mobile devices, use either method 1 or 2 below:

Method #1. Inline CSS

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:

{codecitation}<table style=”width: 100%;”>

</table>{/codecitation}

Also, avoid using the height property, or at least leave it as “auto”.

{codecitation}<table style=”width: 100%; height: auto;”>

</table>{/codecitation}

Method #2. Theme’s CSS

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:

{codecitation}<table>

</table>{/codecitation}

If your theme doesn’t have CSS to define the width for tables, use the example below as a base:

{codecitation}table{
width: 100%;
}{/codecitation}

Instructor

  • Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Subscribe
Notify of
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Daniel

Perfect reminder, Valentin, you’re absolutly right.
Otherwise, the Joomla users can install this free plugin : [url=http://www.web-eau.net/developpement/responsive-tables]http://www.web-eau.net/deve…[/url]

htmgarcia

Hi,
Your plugin works like a charm! I did a quick test 🙂

Thanks for sharing.
Note: the download button image is broken in my end. See screenshot attached, please.
Regards

Daniel

Thank you for your feedback, Valentin 🙂

(dont forget to post a review on …^^).
I’ll try to fix the image issue (thx).

Stewart

How to I set it to 100% width value but have a maximum at the same time for those with large screens?

4
0
Would love your thoughts, please comment.x
()
x