Don't Use Pixel-Width Values In HTML Tables! - OSTraining

Trang chủ » Html Column Width Px » Don't Use Pixel-Width Values In HTML Tables! - OSTraining

Có thể bạn quan tâm

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

Author

  • Valentin Garcia Valentin Garcia

    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.

    View all posts

Từ khóa » Html Column Width Px