Hidden Gems: Fixed Table Layout

CSS has some features that are like easter eggs due to very little known usage in general. These features in most cases, save you from writing tons of unnecessary codes and waste hours of work. table-layout: fixed is one of these gems.

By default, table-layout property is auto. With auto, despite the predefined width, table resizes itself according to content inside the cells. Especially when you are working with big data tables, they tend to overflow from your layout, resulting horizontal scrolling on page, or break the design.

Any Real Usecase?

Recently, I was working on an application which user add records and controls their before/after changes during the process. Data in these records are very big and users want to check changes side by side. In the back-end codes, the content printed in a container table with 100% width and two half sized cells contains the before/after data. Also these data are wider than the cells and they need to be scrollable.

Default Table

Long content pushes the cells, and table overlflows.

See the Pen jEVjqo by Bilal Çınarlı (@bcinarli) on CodePen.

Better view

Fixed layout fixes the broken layout. Also with scrollable inner tables, we have a better visual for our content.

See the Pen GgNbxY by Bilal Çınarlı (@bcinarli) on CodePen.

Inner tables overlap if you do not wrap them. Try this by removing .data-grid-wrap in the pen

Only for Tables?

Since you can set other elements' display to table, you can use this property freely but responsibly. Especially, this feauture is very useful in evenly separated content such as menu and maybe some grid approaches.

Evenly separated and aligned menu

As in the sample below, after adding or removing menu element, arbitrary calculations for the widths or additional javascript workout are needless for links' sizes. They will share the total width automatically in each cases.

See the Pen xbRNvO by Bilal Çınarlı (@bcinarli) on CodePen.

And surprise, it is supported way back to Internet Explorer 5.5.

Further reading