Cell overflow issues with table CSS - html

Question

I have a table with the following code that is giving me some trouble:
Demo http://jsfiddle.net/hF3vt/
[Html]
<table>
<tr>
<th style="width: 18%;">Col 1</th>
<th style="width: 12%;">Col 2</th>
<th style="width: 13%;">Col 3</th>
<th style="width: 7%">Col 4</th>
<th style="width: 7%">Col 5</th>
<th style="width: 6%">Col 6</th>
<th style="width: 5%">Col 7</th>
<th style="width: 13%">Col 8</th>
<th style="width: 16%">Col 9</th>
<th style="width: 3%">Col 10</th>
</tr>
<tr>
<td>Some</td>
<td>Data</td>
<td>Stuff</td>
<td>foo</td>
<td>bar</td>
<td>etc</td>
<td>whatever</td>
<td>stuff</td>
<td>Alotofdatainthiscell</td>
<td>Yes</td>
</tr>
</table>
[CSS]
table {
display: block;
margin: 30px 0 auto 0;
width: 100%;
max-width: 1300px;
text-align: left;
white-space: nowrap;
border-collapse: collapse;
z-index: -1;
}
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
As you can see by this I am trying to have the table sized dynamically according to the window until it hits 1300px and then has a set size.
Everything works fine until I have too much data in a single cell, causing it to become wider than it should for some reason. To fix this I tried to add the ellipsis overflow but that did nothing when I added it. I then remembered that max-width is needed so I added classes to each cell to match the header percent sizes in max-width but that didn't work for some reason unless I specified a max-width in pixels. I was wondering if theres a better way to prevent this ellipsis overflow thing without having to specify it on every cell, or if theres a reason that max-width doesn't work with percents.
Summary:
Long text is ignoring the width of cells and I want it to turn into ellipses when its too long but its not for some reason.

Answer 1

When you align it proper border then it will display in well manner. without border this is because you align the width to every table header and not to <td>.
Here is the updated fiddle:
Demo Here

Answer 2

You can do this by setting a width for the table and you could also use
word-wrap:break-word
Further, if you want to wrap text of an element, you have to specify the width or max-width of that element so that browsers know how to wrap the text content.
In order to prevent really long words to break out of boundaries.
And for table,
table-layout:fixed;
Hence,
Change CSS to this:
table {
display: block;
margin: 30px 0 auto 0;
width: 100%;
max-width: 1300px;
text-align: left;
white-space: nowrap;
border-collapse: collapse;
z-index: -1;
table-layout:fixed;
}
td {
max-width:100px;
overflow: hidden;
word-wrap:break-word;
white-space: nowrap;
text-overflow:ellipsis;
}
EDIT:
You may like to set overflow to auto to show the lot of data.