FF v14 has the exact appearance I want. Unfortunately, IE9 is not cooperating as it does not hide overflow or display the ellipsis. Does anyone know how to resolve this issue for compatibility with IE9?
<!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>
<title></title>
<style type="text/css">
.col
{
max-width:10em;overflow:hidden;text-overflow:ellipsis;
}
.row
{
}
.table
{
white-space: nowrap;
}
</style>
</head>
<body>
<table class="table">
<tr class="row">
<td class="col">This text goes in row 1 column 1</td>
<td class="col">Row 1 Column 2's content looks like this</td>
</tr>
<tr class="row">
<td class="col">Row 2 Column 2 appears here</td>
</tr>
</table>
</body>
</html>
UPDATE
I encountered a validation error while working on this in visual studio:
Validation (CSS 2.1): 'text-overflow' is not a recognized CSS property name.
Could this mean that I need to somehow specify a higher version of CSS explicitly? If so, how can I go about doing that?