Richard Everett Richard Everett - 2 months ago 11
HTML Question

Table cell widths - fixing width, wrapping/truncating long words

I have a table containing cells with text of various lengths. It is essential that all of the table cells are of the same width. If this means truncating long words or forcing a break in long words then that's OK.

I cannot figure out any way of getting this to work.

This is for an internal client application so needs to work in IE6 and IE7 only.

An example page is below. The cell containing

onereallylongword
is the offending one.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
td { width: 30px; }
</style>
</head>
<body>
<table border="2">
<tr>
<td>word</td>
<td>two words</td>
<td>onereallylongword</td>
</tr>
</table>
</body>
</html>

Answer

Stack Overflow has solved a similar problem with long lines of code by using a DIV and having overflow-x:auto. CSS can't break up words for you.