overflow:scroll; in <td>

Question

Why does the CSS property overflow:scroll; not work in <td>, while overflow:hidden; works well?

<table border="1" style="table-layout:fixed; width:100px">   <tr>     <td style="overflow:scroll; width:50px;">10000000000000000000000000000000000</td>     <td>200</td>     <td>300</td>   </tr> </table> 

From the CSS specs^1,2, I can't see why.

Answer 1

You have to wrap it in a div, that will work:

<table border="1" style="table-layout:fixed; width:500px">   <tr>     <td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>     <td>200</td>     <td>300</td>   </tr> </table> 

Answer 2

Firstly provide desired height to td and then Apply "float: left" property to respective "td" you want scrollbar to appear.