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.
Long content pushes the cells, and table overlflows.
Fixed layout fixes the broken layout. Also with scrollable inner tables, we have a better visual for our content.
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
And surprise, it is supported way back to Internet Explorer 5.5.