HTML tables expanding Aug12 '05
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.
Categories: Web Development 
, XHTML
Add Feedback (view all)
Leave feedback
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 i ... Read more.
is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from Chicago.
Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.
Similar Entries
- JavaScript badges should reside on the bottom of the HTML page (138 recent visits)
- Using JavaScript to obtain data from HTML and XML (238 recent visits)
- CSS class, or HTML tag? (15 recent visits)
- HTML to XHTML – a refresher (6 recent visits)
- JavaScript can access hidden HTML (466 recent visits)
- The backlash against HTML email (2 recent visits)
Stats
288 unique visits since August 2008
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. ... Read more.