Is there a better alternative to this solution to hiding overflow text in a cell?

HTML & CSS
1

This is the solution I came up with to hiding overflow text in a cell

<td style = "border-left:1px solid #000;border-right:1px solid #000;padding:0px 10px 0px 10px;">
			<div style="width:200px;overflow:hidden;white-space:nowrap;">abcdefg...</div>
		</td>

I couldn’t find a way to limit the text in my cell to a short snippet without using a div.

How would you do that without a div?

2

You need to set max-width for the cell and overflow hidden. For the IE example you need to set the table-layout to fixed. Here is the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>clip TD</title>
<style type="text/css">
table { table-layout:fixed; }
.maxW { max-width:30px; overflow:hidden; }
</style>
</head>

<body>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100">
  <tr>
    <td width="70%">&nbsp;</td>
    <td width="30%" class="maxW">abcdefghi</td>
  </tr>
</table>

</body>

</html>
3

If you just want any content that doesn’t fit into a cell to be hidden then you just need the table-layout:algorithm.


table {table-layout:fixed;width:100%; }
.cellname { overflow:hidden; }

Unless I misunderstood the question :slight_smile: