HTML table wrap td - html

Question

I've two tables like 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 I run this my internal table is exceeding parent table width (100px) because it is having more TDs. How can restrict this?
All values are coming in the same row and it is going out of reserved area (100px). Is there any way to display values in multiple rows with the above code?

Answer 1

You cannot do this with <table> layout. Even adding the following CSS will not fix it, instead the cells are just rendered over each other.
table {
table-layout:fixed;
overflow:hidden;
}
The HTML table column element <col> element will also not really help since it will only apply to the first <td>.
One approach would be to use a non-<table> layout instead, for 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> does not work and how the <div> layout wraps at 100px.

Answer 2

U can't fit 10 words like this in 100px with normal size font.
I think you might want to use <tr></tr>(row) tags for each word instead of td(cell)
Or you really want the 100px row to be split in 10 cells and to contain those words? (I think if might be somehow possible but u won't see the words :D or maybe if you used little font and somehow made the words to be rotated about 90 degrees...)
This Q/A Word-wrap in an HTML table might help u in that case.

Answer 3

add a class to table and set this css code
table.restrict { table-layout:fixed; }
table.restrict td { overflow: hidden; }

Answer 4

It will help you:
Fixed Table Cell Width
Use style attr 'table-layout:fixed' with table
or try this:
// div css
<style>
.frame {
overflow-x:scroll;
width:100px;
}
</style>
<div class='frame'>
<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>
</div>