table で overflow が効かない

overflowでは表示範囲からはみ出た文字を表示させたり
非表示にしたりすることができるんですが、
tdにid振るとで効かないのがわかりました。

対処法はdivで囲んでid振ってみました。

以下参考

aaaaaaaaaaaaaaaaaaaaaaaaaaaa	aaaa
a	a

aaaaaaaaaaaaaaaaaaaaaaaaaaaa	aaaa
a	a

<table>

<tr>

<td id='test'>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>

<td>aaaa</td>

</tr>

<tr>

<td>a</td>

<td>a</td>

</tr>

</table>
<table>

<tr>

<td><div  id='test'>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>

<td>aaaa</td>

</tr>

<tr>

<td>a</td>

<td>a</td>

</tr>

</table>
<style type="text/css">

   #test {

          color: red;

          width: 20px;

          overflow:hidden;

        }

</style>