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

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.

Here’s an example of a table using a percentage width value on mobile. It adapts to the screen-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:

<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’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:

<table>
...
</table>

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

table{
width: 100%;
}