Wide Table on Responsive Page

A recent custom project required generating a wide table of numbers and calculation results from data in a MySQL table.

The website is a responsive site and the wide table needed to, somehow, just work.

To complicate things a bit, the width of the table varies depending on the customization the site user requests.

In this article, I'll describe the five versions of containers for the numbers table that were used for preliminary presentation for the client to choose from. The descriptions may help you decide which to use should you find yourself in a situation where a wide table needs to be published on a responsive web page.

The containers are divs formatted with CSS declarations. Although inline for the examples, the CSS declarations would generally be in a CSS style sheet.

The first container.

The first container is a regular div, non-responsive. It's width is the width of the widest numbers table. The CSS declaration width:1155px; formats the div.

<div style="width:1155px;">
[Wide table]
</div>

The div obviously isn't responsive. It's here for comparison. Maintenance of the CSS declaration would be required when the MySQL data is updated and calculated numbers result in a different widest width.

The second container.

This container is fully responsive to the width of the web page display area. But the site user has to scroll in order to see the entire numbers table.

The CSS declarations are max-width:500px; and overflow:auto; to both specify a maximum width and to implement scrollbars whenever the numbers table is wider than the container.

<div style="max-width:500px; overflow:auto;">
[Wide table]
</div>

The maximum width is the maximum width of the column where the table will be published. If the column width changes, the CSS declaration will also need to be changed.

If the width of the area where the table is displayed is larger than 500 pixels, the visible area of the numbers table is still constrained to 500 pixels. The div, in such case, is aligned to the left-hand side of the display area.

The third container.

This container is also fully responsive to the width of the web page display area. Like the previous container, the site user has to scroll in order to see the entire numbers table whenever the width of the table exceeds the display area.

However, it has no CSS max-width property. It does have the CSS declaration overflow:auto; for scrollbars whenever the numbers table is wider than the container.

<div style="overflow:auto;">
[Wide table]
</div>

If the numbers table is narrower than the container, it will be aligned to the left side of the container.

The fourth container.

This container is formatted with CSS declaration display:table; so it adjusts automatically to the width of the numbers table. It also has CSS declaration margin:0 auto; to center the container whenever the available space is wider than the numbers table.

<div style="display:table; margin:0 auto;">
[Wide table]
</div>

It does not, however, have scrollbars. The display:table; declaration has no overflow. The width of the numbers table is the width of the div. Therefore, the container can't be considered fully responsive.

The fifth container.

This container is doubled, a container within a container.

The outside container is the same as the third container described above, with CSS declaration overflow:auto; for scrollbars.

The inside container is the same as the fourth container described above, with CSS declarations display:table; and margin:0 auto;

<div style="overflow:auto;">
   <div style="display:table; margin:0 auto;">
[Wide table]
   </div>
</div>

The container is responsive.

The doubled container provides scrollbars when the available area is narrower than the width of the numbers table. When the available area is wider than the numbers table, the numbers table is horizontally centered within the area.

Each of the five containers require compromise. Some don't show the entire numbers table. Others don't center the numbers table when the available area is wider than the table requires. Some aren't responsive.

Considering each container and it's features, a person can decide which container's compromises are acceptable in light of the desired features it has.

(This article first appeared in Possibilities ezine.)

Will Bontrager