可変長のスパンでCSSがオーバーフローする

Question

私は2列のテーブルを持っています。 2列の幅が設定されているため、変更しないでください。最初の列には、2つのスパンが横に並んでいます。第1のスパンの内容は可変長である。 2番目のスパンです。私がしたいのは、コンテンツが境界線に当たったときに第2スパンのオーバーフローを隠すことです。私はいくつかのことを試みましたが、解決策を見つけることはできません。誰かが助けることを願っています。あなたの返信を先にありがとう。乾杯。マーク

http://cssdesk.com/eAN3d

マイ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> 

マイ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

私はこの信じられないほど満足してないんだけど、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; 
} 

これが結果です：