One frustrating aspect of dealing with HTML tables is that they expand to contain whatever data is inside them.

This becomes apparent when you want the table to remain a consistent size, no matter what data is contained within the cells.

Unfortunately, if you have a very long string of data, without spaces, the table cell which contains that data will expand to fit the entire string.

For example, here is a table (used for tabular data), which holds it's specified width:

See how it fits nice and neat within the boundaries of the layout? I have it set up like that, for a reason.

The specified width for this table is 550 pixels, which is declared through CSS. 550 pixels is narrow enough to fit within this column of layout.

However, if one of the table cells contains a really long string - or if CSS has styled a string to be more large in size, or more bold in weight - that table cell will expand to be as large as the contained string, padding included:

Notice how the layout breaks.

This commonly occurs when displaying a full URL, which doesn’t have spaces, and can often be extremely long.

No matter what width you have specified for the table, through CSS, the table will expand.

I’m not sure if there is a CSS property/value which corrects this issue, but whenever I use data tables in my work, I always come across this problem.

To make up for it, I always end up adjusting the font size of the cells with the long strings, or applying some CSS rule to make the data stay within bounds.

I hate having to make adjustments all the time, and I refuse to use a different HTML element for the data - simply because tabular data is tabular data. It should be marked up as such.