Question

I am using CSS, but for the sake of quick testing I’m just using an inline style. This is the code I am trying to implement:

echo "<td style='height=10px; width=10px;'>";

it makes sure that the max width of the cell is 10px , however the height overflows with the text so and it get very large (high).

what I am trying to achieve is any information that is in that cell more than 30 characters I want to hide so you can’t see it.

(I know 30 characters is more than 10px but I am just playing to see if it worked!)

Answer 1

Your syntax is wrong:

Bad

echo "<td style='height=10px; width=10px;'>";

Good

echo "<td style='height:10px; width:10px;'>";

However, this doesn’t fix the problem. The way I read the spec, only fixed layout tables are allowed to clip their content on overflow (versus resizing to accommodate it).

A better/simpler way would be to use a DIV.

See this example: http://jsfiddle.net/Aa4JL/

However, if your data is tabular and you need to use a table, you can achieve the same effect by wrapping the cell’s contents in a DIV.

<table>
    <tr>
     <td><div style='height:10px; width:10px; overflow: hidden;'>This text is clipped.</div></td>         
    </tr>
</table>​

Note that if you don’t care about clipping based on height you can achieve a nice ellipses effect using fixed layout tables combined with white-space: nowrap combined with text-overflow: ellipsis. This does not require wrapping the content with a DIV. Note that the ellipsis effect will only work in newer browsers (content should still be clipped in older browsers).

<table style="table-layout:fixed;width:50px;">
    <tr>
     <td style='width:50px; overflow: hidden; white-space:nowrap; text-overflow: ellipsis;'>Long string of text with nice ellipses effect.</td>         
    </tr>
</table>

This fiddle has all the techniques I’ve just described: http://jsfiddle.net/Aa4JL/4/