HTML tables expanding

August 12, 2005 / Filed under: Web Development, XHTML

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:

Column 1 Column 2 Column 3 Column 4 Column 5
Data Data Data Data Data
Data Data Data Data Data
Data Data Data Data Data
Data Data Data Data Data

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:

Column 1 Column 2 Column 3 Column 4 Column 5
Data Data Data Data Data
Data Data Datayfgfghfjghjghjgjhghjgjgkfdfdghfsdgfdfdtrdtrdtrdtrdtrdtrdtd Data Data
Data Data Data Data Data
Data Data Data Data Data

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.

Comments/Mentions

# Jennifer Grucza at 8/15/2005 12:47 pm cst

Can you add a CSS rule for td's like overflow:auto? You'd probably need to have an explicit width and maybe height too, I guess.

# Matthom at 8/15/2005 6:02 pm cst

I don't think there's any way around it. I can't have a specific height - that would severly limit my data.

The only thing I can think of is somehow having the long string get "cut off" - while the table remains intact - because I'd rather have that, than the table expanding.

There is an old CSS property called word wrap, which cuts off a long string - and keeps the content in place.

I actually use that on this site - in the right column.

The property is deprecated - and it mainly targets IE, but it seems to work, in some situations.

I could try that, but I also might try toying with the overflow property, like you mentioned.