動的な列を持つテーブルが固定されたレイアウト

Question

動的に作成された任意の数の列を含むことができるページの場合は、100％の表が必要です。各列には非常に長い単語が含まれているため、すべてが1ページに収まらない場合があります。これを修正するには、table-layout: fixedを使用しました。これにより、ページの表のすべての列が表示されます。問題は、各列の幅を動的にしたいから、列に短い単語がある場合は、長い単語のものよりも短くする必要があるということです。例えば、jsfiddle。

表1には常にすべての列が示されていますが、ページの幅が十分に広い場合は、他の列に空き領域があってもワードが分割されます。

表2は、ページが列よりも広いが、最初の列が画面の外に他の列を他のオブジェクトにプッシュするときに機能します。

すべてを手に入れる方法はありますか？テーブルには、フィットする必要があるよりも幅の広い列と列が常に含まれていますか？私はそれがテーブルをあふれさせなければならないならば、言葉を壊すことを望む。

私はjs/jqueryの解決策を受け入れることができましたが、可能であればCSSが望ましいです。

編集：

小さなテーブル： 注：asasdasdasdasdasdasdasdasdasdasdasdテーブルがこれより大きくすることができないので、短縮さワードです。

+--------------------+----------+---------+ 
|asasdasdasdasdasdasd|qweqweqweq|zxczxczxc| 
|asdasdasdasdasd  |   |   | 
+--------------------+----------+---------+ 

大きなテーブル： 注：すべての列は、好ましくは、それらが均等に分散空のスペースで増加、等しい大きさではありません。

+--------------------------------------+-------------+------------+ 
|asasdasdasdasdasdasdasdasdasdasdasd |qweqweqweq |zxczxczxc | 
+--------------------------------------+-------------+------------+ 

Answer 1

私は、これが出発点となる可能性が理解している場合：プロパティを：すべてのの

var tds; 

$("table").each(function() { 

    tds = $("td"); 

    for(var x = 0; x < tds.length; x++){ 
     tds.eq(x).css('max-width', '100px'); 
    } 

}); 

Answer 2

まず「固定テーブルレイアウト」を削除します。

が、これはあなたのケースで完璧に動作するはずです、次のコードを試してみてください。私が理解

$(document).ready(function(){ 

$("table").find('tr').children('td').each(function() { 
    var wdth = $(this).html().length + 10; 
    $(this).css({ 'padding-right': '10px' }, { 'width': wdth + 'px' }); 
    }); 
});