Forum Moderators: not2easy
i have a dynamic generated table with email addresses and topics.
Email addresses can be very long,
so i want the overflowing text to be hidden.
But IE5 mac is hiding all text in the table cells.
Is there any solution or workaround?
Thank you very much!
Example:
<html>
<head>
<title>Mac IE 5.2 overflow:hidden in TD problem</title>
<style type="text/css">
<!--
TD {overflow:hidden}
A {display:block;white-space:nowrap;overflow:hidden;}
DIV {white-space:nowrap;overflow:hidden}
-->
</style>
</head>
<body>
<table width="100" border="1">
<tr>
<td width="50"><a href="#">This text is too long to fit here</a></td>
<td width="50"><a href="#">This text is too long to fit here</a></td>
</tr>
</table>
<div style="width:100px; border:1px solid green">This text is too long to fit here</div>
</body>
</html>
td div {width:50px;overflow:hidden;}
a {display:block;white-space:nowrap;}
div {white-space:nowrap;overflow:hidden;}
<table width="100" border="1">
<tr>
<td width="50"><div><a href="#">This text is too long to fit here</a></div></td>
<td width="50"><a href="#">This text is too long to fit here</a></td>
</tr>
</table>
<div style="width:100px; border:1px solid green">This text is too long to fit here</div>
A little bit modified:
<html>
<head>
<title>Mac IE 5.2 overflow:hidden in TD problem workaround</title>
<style type="text/css">
<!--
table {table-layout:fixed}
a {white-space:nowrap}
.td1 {width: 50px}
.td2 {width: 60px}
.td3 {width: 70px}
td div {width:100%;overflow:hidden}
-->
</style>
</head>
<body>
<h1>TABLE</h1>
<table border="1">
<tr>
<td class="td1"><div><a href="#">This text is too long to fit here</a></div></td>
<td class="td2"><div><a href="#">This text is too long to fit here</a></div></td>
<td class="td3"><div><a href="#">This text is too long to fit here</a></div></td>
</tr>
</table>
</body>
</html>
