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

| Coding Tutorials
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:

<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%;
}


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.