The table-layout property The table-layout property CSS

At work, I’m occasionally asked to host some seminars on web technology for our marketing department. The latest of which will be a primer on HTML, CSS and a brief introduction to responsive web applications.

When doing a bit of research on responsive layouts, I came across the table-layout css property. Something that always bothered me with html tables was the default layout behavior, the width of the columns always becomes problematic with long pieces of information.

table-layout: fixed;

The table-layout:fixed; property solves this problem by:

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

This means that you have much more finite control of the data in your table. Combining it with a css ellipsis you can get some neat results. Try resising the window when looking at the pen below.

See the Pen bNQbYy by Alex Wyett (@alexwyett) on CodePen.

Browser support for this ubiquitous right back to IE5 so really I can’t see any reason why not to adopt this as a standard property in a normalisation/reset script. Can you think think of a reason? Leave a comment if you do!