HTML table wrap td -

hi i've 2 tables below

<table width="100px"> <tr>    <td>       <table width="100%">       <tr>            <td>one</td><td>two</td><td>three</td><td>four</td><td>five</td>            <td>six</td><td>seven</td><td>eight</td><td>nine</td><td>ten</td>        </tr>        </table>     </td> </tr> </table> 

when run internal table exceeding parent table width (100px) because having more tds. how can restrict this? values coming in same row , going out of reserved area (100px). there way display values in multiple rows above code?

you cannot <table> layout. adding following css not fix it, instead cells rendered on each other.

table {     table-layout:fixed;     overflow:hidden; } 

the html table column element <col> element not since apply first <td>.

one approach use non-<table> layout instead, example:

html

<table> <tr>     <td>         <div id="container">             <div>one</div><div>two</div><div>three</div><div>four</div><div>five</div>             <div>six</div><div>seven</div><div>eight</div><div>nine</div><div>ten</div>         </div>     </td> </tr> </table> 

css

table {     width:100px; }  #container div {     display:inline-block; } 

see demo of how <col> not work , how <div> layout wraps @ 100px.