Tabelle mit dynamischen Spalten aber Layout fixiert

Question

Ich möchte eine Tabelle, die 100% ist, wenn die Seite, die beliebig viele Spalten enthalten kann, dynamisch erstellt wird. Jede Spalte kann sehr lange Wörter enthalten, so lange, dass sie nicht alle auf eine Seite passen. Um dies zu beheben, benutzte ich table-layout: fixed, wodurch alle Spalten der Tabelle auf der Seite sichtbar wurden. Das Problem ist, dass ich immer noch möchte, dass die Breite jeder Spalte dynamisch ist, so dass, wenn eine Spalte kurze Wörter hat, diese kürzer sein sollte als die mit dem langen Wort.

Beispiel: jsfiddle.

Tabelle 1 zeigt immer alle Spalten an, aber wenn die Seite breit genug ist, unterbricht sie das Wort, obwohl in anderen Spalten noch Platz ist.

Tabelle 2 funktioniert einwandfrei, wenn die Seite breiter als die Spalten ist, aber die erste Spalte die anderen Spalten aus dem Bildschirm/auf andere Objekte verschiebt, wenn das Fenster kleiner ist.

Gibt es einen Weg, um alles zu bekommen? Eine Tabelle, die immer alle Spalten und Spalten enthält, die nicht breiter sind als sie sein müssen? Ich möchte, dass es die Worte bricht, wenn es den Tisch nicht überschwemmt.

Ich könnte eine js/jquery Lösung akzeptieren, aber wenn es mit CSS möglich ist, ist das vorzuziehen.

Edit:

Kleiner Tisch: Hinweis: asasdasdasdasdasdasdasdasdasdasdasd ist ein Wort, das verkürzt wird, da die Tabelle nicht als diese größer sein kann.

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

Große Tabelle: Hinweis: alle Spalten sind nicht gleich groß, vorzugsweise erhöhen sie mit leeren Räumen gleichmäßig verteilt.

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

Answer 1

Wenn ich verstehe dies ein Ausgangspunkt sein könnte:

var tds; 

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

    tds = $("td"); 

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

}); 

Answer 2

Vor allem entfernen Sie das "table-layout: fixed" Eigenschaft.

Versuchen Sie den folgenden Code, sollte dies perfekt in Ihrem Fall:

$(document).ready(function(){ 

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