Tabela z kolumnami dynamicznymi, ale układ poprawiony

Question

Chcę tabeli, która jest 100%, jeśli strona, która może zawierać dowolną liczbę kolumn, dynamicznie tworzone. Każda kolumna może zawierać bardzo długie słowa, tak długie, że wszystkie mogą nie zmieścić się na jednej stronie. Aby to naprawić, użyłem table-layout: fixed, dzięki czemu wszystkie kolumny tabeli były widoczne na stronie. Problem polega na tym, że nadal chcę, aby szerokość każdej kolumny była dynamiczna, więc jeśli kolumna ma krótkie słowa, powinna być krótsza niż ta z długim słowem.

Przykład: jsfiddle.

Tabela 1 zawsze pokazuje wszystkie kolumny, ale gdy strona jest wystarczająco szeroka, łamie słowo, mimo że w innych kolumnach jest wolne miejsce.

Tabela 2 działa poprawnie, gdy strona jest szersza niż kolumny, ale pierwsza kolumna wypycha inne kolumny z ekranu/do innych obiektów, gdy okno jest mniejsze.

Czy istnieje sposób, aby to wszystko uzyskać? Tabela, która zawsze zawiera wszystkie kolumny i kolumny, które nie są szersze niż muszą być dopasowane? Chcę, żeby łamała te słowa, jeśli musi, a nie przepełniać stół.

Mogę zaakceptować rozwiązanie js/jquery, ale jeśli jest to możliwe, najlepiej użyć CSS.

Edit:

Mały stolik: Uwaga: asasdasdasdasdasdasdasdasdasdasdasd jest jeden słowo, które jest skrócony, ponieważ tabela nie może być większy niż ten.

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

Duży stół: Uwaga: wszystkie kolumny nie są jednakowej wielkości, najlepiej zwiększają one z pustych przestrzeni równo rozłożone.

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

Answer 1

Jeśli dobrze rozumiem to może być punktem wyjścia:

var tds; 

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

    tds = $("td"); 

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

}); 

Answer 2

Przede wszystkim usunąć "table-layout: fixed" własność.

Wypróbuj poniższy kod, to powinno działać idealnie w przypadku:

$(document).ready(function(){ 

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