<table style="table-layout:fixed;">
<tr>
<td width="221" style="overflow:hidden">
//A very long text that meant to overflow
</td>
</tr>
</table>
After some research, the above code should works fine but it's not. It can only be achieved if there is an extra div tag with style overflow:hidden in td.
And another question is how to implement an overflow to height? Would be appreciate if any sample code can be provided.
You should specify more details to your object, like white-space, because the ling text is automatically wrap in td.
<table style="table-layout:fixed;">
<tr>
<td width="221" style="overflow:hidden;display:block;width:5em;white-space:nowrap;background-color:#ccc;">
//A very long text that meant to overflow
</td>
</tr>
Adding white-space: nowrap; to the TD should solve it.
For controlling hight only u have to use the CSS property overflow-y in place of overflow. To apply scrolling u have to use overflow-y: scroll and similar to that of overflow for other such cases.
you can emulate overflow:hidden without alterate table-layout, just putting inside the TD two divs:
<div style="position: relative;">
<div style="overflow: hidden; width: 320px; height: 150px;">
content
</div>
</div>
See yor code on JSFiddle
if you want to have overflow for the specific width and height, you should add css property display:block to <td> and as others said before for width overflow you should set white-space:nowrap it prevent your text to be wrap ,this is a working example with overflow:scroll for better underestanging
