css td overflow with spans having variable length - css

Question

I have a table with two columns. The width of the 2 columns are set and should not be modified. The first column contains 2 spans standing side by side. The content of the first span has a variable length. The second span also. What I would like to do is to hide the overflow of the second span when the content hits the border. I tried several things but I do not manage to find a solution. Hope someone can help. Thank you in advance for your replies. Cheers. Marc.
http://cssdesk.com/eAN3d
My HTML:
<table>
<tr>
<th>th1</th>
<th>th2</th>
</tr>
<tr>
<td>
<span>Paul</span>
<span class="hide-overflow">Some text with no overflow</span>
</td>
<td>txt</td>
</tr>
<tr>
<td>
<span>Emmanuelle</span>
<span class="hide-overflow">The overflow of this text string has to be hidden.The td has to be only one line and the width should not be extended.</span>
</td>
<td>txt</td>
</tr>
</table>
My CSS:
table{
width:400px;
border-spacing: 0px;
border-collapse: collapse;}
th,td{
border:1px solid black;}
td:first-child{
width:350px;}
td:last-child{
width:50px;}
.hide-overflow{
background-color:yellow;
}

Answer 1

I'm not incredibly happy with this, but it does seem to work in Firefox. jsFiddle
table{
width:400px;
border-spacing: 0px;
border-collapse: collapse;
table-layout:fixed;
}
th,td {
border:1px solid black;
white-space: nowrap;
}
th:first-child, td:first-child{
width:350px;
overflow:hidden;
}
th:last-child, td:last-child{
width:50px;
}
.hide-overflow{
background-color:yellow;
}
span.hide-overflow {
white-space:nowrap;
}
This is the result: