テーブルの省略記号を使用する

コードでは、div内にテーブルを保持しようとしています。テーブルの幅は100ピクセルのdiv内に100％です。テーブルの省略記号を使用する

問題は、コンテンツが関係なく伸びていることです。これを処理する最善の方法は何ですか？

#container { 
 
    width: 100px; 
 
    border: 1px solid green; 
 
    } 
 

 
table { 
 
    width: 100%; 
 
    border: 1px solid blue; 
 
    } 
 

 
table div { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    width: calc(100% - 10px); 
 
    }

<div id="container"> 
 
<table> 
 
    <tr> 
 
    <td>1</td> 
 
    <td><div>abcdefghijklmnopqrstuvwxyzyxwvutsrqponmlkjihgfedcba</div> 
 
    </td> 
 
    </tr> 
 
</table> 
 
</div>

出典

2016-09-14 Daniel Williams

'テーブルレイアウトを追加してみてください：固定された、上記のリンクによれば、' 'table' –

には..ここで[フィドル]（https://jsfiddle.net/venkateshwar/o1bvr62m/）であります –

覚えておくべきことは、テーブルがその中のすべてを表示することが非常に難しいことです。たとえば、100％で十分でない場合、 'table {width：100％}'は無視されます。したがって、実際にテーブルを必要としない場合は、テーブルなしで実行してください。この質問の例は、表よりも順序付きリストに似ています。 –