How do I get overflow:hidden to work in IE6?
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>
Tables and overflow are a tricky thing in general. If you can, and it doesn't give you unbearable side-effects, put a div into the column and apply the overflow: hidden to that.
加载中,请稍侯......
精彩评论