I'm trying to get the contents of a table cell to clip instead of causing the cell to grow in height. IE8 works nicely, but of course IE6 doesn't behave the same way at all. Is there something else I can add to get IE6 to behave the way I want?
Here is my sample page html:
<!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">
table.grid
{
border-style:none;
border-color:#A0A0A0;
border-collapse:collapse;
width: 100%;
table-layout:fixed;
}
table.grid tr
{
background-color:#F0F0F0;
}
td
{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
</style>
</head>
<body>
<table class="grid">
<tr>
<td style="width:100%;">test</td>
<td style="width:100px;">test wide sentance</td>
<!-- Second cell should clip instead of growing in height -->
</tr>
</table>
</body>
</html>